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Parte  I  -  Hablemos  de 
JavaScript 


Introducción 

Sobre  este  libro 


He  tenido  grandes  maestros,  que  me  han  enseñado  mucho  y  he  leído  muchos  libros  sobre 
este  mundillo...  pero  nunca  he  logrado  dar  con  el  libro  que  solucionará  todas  las  dudas  o 
me  diera  una  base  sólida  sobre  la  que  crecer  en  un  lenguaje  tan  fascinante  y  estigmatizado 
como  es  JavaScript. 

Por  eso,  este  libro  está  escrito  como  me  hubiera  gustado  que  fueran  aquellos  que  yo  leía 
cuando  empezaba  a  programar  en  JavaScript. 

Este  libro  que  tienes  ahora  mismo  ante  tus  ojos,  es  el  resultado  de  mi  esfuerzo  personal, 
con  el  objeto  de  crear  un  instrumento  sencillo  y  simple  que  muestre  al  lector  la  base  de  un 
lenguaje  tan  peculiar  y  extendido  como  JavaScript. 

Mi  idea,  es  empezar  desde  cero  y  hacer  un  viaje  juntos  desde  los  abismos  profundos  de  la 
duda,  pasando  por  el  pseudocódigo  hasta  llegar  al  maravilloso  mundo  de  las  llamadas  Ajax, 
haciendo  muchas  paradas  en  el  camino,  en  las  que  aprenderemos  todo  lo  que  necesitas  para 
empezar  tu  aventura  como  desarrollador  Front-end  con  sólidas  bases  en  JavaScript. 


Esto  va  de  ser  una  comunidad 


Este  libro  está  licenciado  bajo  Attribution-NonCommercial-ShareAlike  4.0  International  (CC  BY- 
NC-SA4.0),  loque  permite  compartir,  distribuir,  adaptarlo  siempre  y  cuando  no  lo  hagas  con 
fines  comerciales,  atribuyas  el  crédito  al  autor  y  compartas  las  modificaciones  bajo  la  misma 
licencia. 

Todo  el  código  fuente,  está  en  este  repositorio  de  GitHub,  desde  este  lugar  espero  poder 
ayudaros  con  las  dudas  que  os  puedan  ir  surgiendo,  y  también  cuento  con  vuestras -siempre 
interesantes-  aportaciones  y  sugerencias  a  través  de  estos  Issues 

Este  libro  es  algo  vivo  y  por  ello  estará  evolucionando  constantemente.  Recuerda  que  tu 
puedes  formar  parte  de  todo  esto,  colaborando. 

Existen  muchas  formas  de  colaborar: 

•  Avisando  de  los  errores  y  de  las  posibles  erratas  que  pudieses  encontrar  en  el  código. 

•  Mejorando  los  ejemplos. 

•  Traduciendo  este  libro  a  otros  idiomas  para  que  llegue  a  más  lectores. 

•  Compartiendo  tus  sensaciones  en  twitter  con  el  hashtag  #Javascríptlnspírate. 

Encontrarás  más  información  en  el  archivo  contributing.md,  dentro  de  nuestro  repositorio. 
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¿Qué  necesito  saber  antes  de  empezar? 

No  es  necesario  tener  experiencia  programando,  pero  si  que  es  importante  tener  claro  el 
contexto  de  cómo  se  hacen  páginas  web  estáticas,  ya  que  en  la  parte  III  nos  centraremos  en 
la  manipulación  dinámica  del  DOM  y  las  llamadas  AJAX. 

No  me  extenderé  mucho  acerca  de  HTML  y  CSS,  por  lo  que  espero  que  ya  tengáis  cierto  cono¬ 
cimiento  adquirido.  Aunque  vuestro  nivel  de  conocimientos  y  experiencia  sea  relativamente 
bajo,  hemos  procurado  evitar  que  esto  sea  un  freno  a  tu  aprendizaje  en  JavaScript. 

Si  tienes  experiencia  en  otros  lenguajes  de  programación,  jugarás  con  ventaja  al  principio, 
pero  note  confies... 

Si  ya  has  trabajado  con  JQuery  hablaremos  de  como  hacertodo  lo  que  haces  con  JavaScript 
en  los  últimos  capítulos. 


¿Qué  aprenderemos? 

•  Pseudocódigo. 

•  A  pensar  como  un  programador. 

•  Trabajar  fluidamente  con  funciones. 

•  Dominar  las  bases  de  JavaScript  (estructuras  del  lenguaje). 

•  Ajaxy  sus  peticiones. 

•  Manipulación  dinámica  del  DOM. 


¿Qué  no  aprenderemos? 

JavaScript  es  un  universo  inmenso  que  va  creciendo  a  pasos  agigantados  con  expansiones. 
Recuerda  que  la  idea  es  sentar  las  bases  del  lenguaje,  por  lo  que  no  veremos  cosas  como: 

Bases  de  datos 

Ya  sean  SQL  o  NoSQL,  es  algo  que  no  pretendemos  tratar  en  este  libro. 

Paradigmas  POO,  Funcional,  etc...) 

Hablaremos  de  pasada  de  algunos  conceptos  interesantes  de  los  diversos  paradigmas 
que  ofrece  JavaScript,  pero  no  iremos  más  allá. 

HTML5  APIS 

Aunque  hablaremos  de  pasada  sobre  cosas  tan  potentes  como  LocalStorage,  queda 
muy  lejos  de  las  bases  de  JavaScript  sobre  las  que  queremos  centrarnos. 

Regex  (Expresiones  Regulares) 

Es  algo  muy  útil  en  el  día  a  día,  y  será  mencionado,  pero  solo  por  encima  para  entender 
como  enfrentarnos  a  ello  como  desarrolladores  noveles. 

Patrones  de  diseño  ( Decorator ,  Fagade...) 

Son  muchos  los  patrones  que  podemos  aplicar  a  JavaScript  para  que  nuestro  código 
adquiera  “super  poderes”,  pero  esto  también  queda  muy  lejos  de  nuestros  objetivos. 
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Testing 

Uno  de  los  pilares  del  buen  código,  es  hacer  testing  o  seguir  filosofías  como  TDD  o 
TBD.  Pero  para  alguien  que  empieza  en  este  mundillo,  creo  que  sería  un  freno  a  tu 
aprendizaje. 

Git  y  Github 

Otra  de  las  cosas  sin  las  que  uno  no  puede  considerarse  un  desarrollador  de  verdad,  si 
no  sabe  manejarse  con  fluidez  en  ello. 

Frameworks  Angular,  React,  Polymer,  Backbone,  etc...) 

La  fiebre  M V  de  JavaScript*  quedará  fuera  de  este  libro  por  motivos  evidentes  pero 
recuerda  que  aqui  utilizaremos  el  framework  de  JavaScript  más  popular  y  veterano, 
Vanilla-js. 

Librerías  Jquery,  Mathjs,  Momments.js...) 

La  ¡dea  de  este  libro  es  trabajar  sobre  JavaScript  -vieja  escuela-,  al  estilo  de  Douglas 
Crockford.  Por  eso  no  trabajaremos  con  JQuery  directamente,  ni  con  ninguna  otra 
librería,  aunque  si  recomendaremos  otras  muchas  librerías. 

ECMAScript  6,  ECMAScript  7 

Aunque  hablaremos  de  ciertas  cosas  que  ha  traído  consigo  ECMAScript  6,  sin  embargo 
nos  centraremos  en  el  clásico  ECMAScript  5.1  (vigente  desde  2011)  con  una  compatibi¬ 
lidad  nativa  envidiable. 

Node.js 

Me  encanta  Node.js,  por  tener  todo  el  potencial  de  JavaScript,  sin  las  restricciones  del 
navegador...  bucear  en  un  mundo  asincrono  de  posibilidades  infinitas  donde  puedes 
crear  desde  servidores  Http,  hasta  cosas  tan  alucinantes  como  robots... 

Node.js  da  para  una  colección  de  libros  por  si  mismo,  y  por  ello  queda  muy  lejos  de 
nuestros  objetivos. 

Gulp,  Grunt,  Broccoli... 

Aunque  la  automatización  y  la  gestión  de  tareas  es  otra  de  las  cosas  que  más  me 
apasionan,  queda  también  lejos  de  los  objetivos  que  nos  hemos  marcado.  ¡Lo  siento!... 

De  paso  también  me  gustaría  desmitificar  algunas  cosas: 

Matemáticas 

Programares  hacer  magia  con  máquinas,  las  matemáticas  son  opcionales... 
Matemáticas  Avanzadas,  Estadística,  etc... 

Para  dominar  los  conocimientos  y  las  técnicas  de  JavaScript,  solo  necesitas...  saber 
sumar,  restar,  dividir  y  multiplicar...  ¡solo  eso! 

Física  nuclear 

Un  poco  de  humor. 

In  teligencia  Artificial 

Esto  queda  un  poco  lejos  aún,  pero  sigue  trabajando...  ¡Padawan! 

Importante 

Humor 

Si  note  ríes  en  algún  momento  mientras  lees  este  libro....  claramente  no  es  para  ti  y  no 
he  cumplido  el  reto  de  intentar  enseñarte  cosas  alucinantes  con  un  poco  de  humor  :-D 
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Cero  coste,  0$ 

Este  libro  es  completamente  gratuito,  con  un  doble  objetivo,  que  nadie  se  quede  sin 
aprender  por  no  tener  recursos  y  además  para  contribuir  de  este  modo  a  la  comunidad 
del  softi/i/ore //'£>re. 

Aunque  el  libro  es  gratuito,  Leanpub  permite  comprar  este  libro  al  precio  que  tu 
consideres.  Todos  los  beneficios  generados  serán  donados  integramente  a  Code  Club 
desde  la  propia  plataforma  de  Leanpub.  El  autor  no  percibirá  nada  de  esas  donaciones. 

Adaptable 

En  principio  este  libro  está  disponible  en  tres  formatos  básicos  pdf,  mobi,  epub  y  su 
código  fuente  está  en  Markua.  Pero  partiendo  del  repositorio  en  GitHub  puede  ser 
convertido  a  más  formatos. 

Este  libro  está  vivo 

Con  el  tiempo  irá  creciendo  y  mejorándose.  Mantente  al  día  desde  su  página  oficial 

Un  mar  de  recursos 

La  mayoría  de  los  links  del  libro,  os  dirigen  a  blogs  técnicos  y  a  la  documentación 
oficial  de  Mozilla  Developer  Network.  Si  un  concepto  resulta  difícil  de  entender  o  deseas 
profundizar  más...  estos  links  pueden  ser  un  buen  punto  de  partida. 

Facilidades 

La  mayor  parte  del  código  está  creado  con  la  nomenclatura  en  español,  para  facilitar  la 
comprensión  y  lectura  por  parte  de  nuevos  desarrolladores.  No  obstante,  recuerda  que 
esto  no  está  considerado  una  buena  practica  en  entornos  profesionales. 

¡A  tu  ritmo! 

A  lo  largo  del  libro  observaréis  que  hay  numerosos  ejemplos  explicativos.  Sin  embargo 
no  encontraréis  ejercicios,  para  así  hacer  más  ágil  su  lectura  y  para  que  os  animéis  a 
venir  a  una  de  las  muchas  reuniones  de  la  comunidad  {Open  Source  Weekends,  Node 
Girls  Madrid...)  y  practicar  con  proyectos  de  verdad  y  con  el  tiempo  lleguéis  a  proponer 
vuestros  propios  proyectos  dentro  de  la  comunidad. 


Convenciones  utilizadas  en  este  libro 

Ejecuta  el  código 

Todos  los  ejemplos  de  código  que  veras  en  el  libro  tienen  significado  por  si  mismos  y 
pueden  ser  ejecutados  en  la  consola  del  navegador  sin  problema  alguno,  es  más,  os  lo 
recomendamos  encarecidamente. 

Iconos  utilizados  en  este  libro 


O 

A 


Cuando  veas  este  icono  sabrás  que  tendrás  un  lugar  desde  el  que  ampliar  conoci¬ 
mientos  y  profundizar  un  poco  más  en  los  conceptos  del  capítulo. 


Cuando  veas  este  icono  sabrás  que  debes  prestar  mucha  atención,  ya  que  se  trata 
de  un  concepto  clave  para  entender  el  capítulo  en  el  que  te  encuentras. 
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Cuando  veas  este  ¡cono  sabrás  que  se  trata  de  un  consejo  que  puedes  seguir  o  no... 


Cuando  veas  este  ¡cono  sabrás  que  estamos  hablando  de  cosas  relacionadas  con  la 
comunidad  de  desarrolladores. 


Cuando  veas  este  ¡cono  sabrás  que  los  enlaces  te  llevarán  a  web.archive.org,  la 
máquina  del  tiempo  de  Internet. 


Cuando  veas  este  ¡cono  sabrás  que  ha  llegado  el  momento  de  preparar  un  buen  café 
y  dedicar  un  tiempo  a  leer  con  calma  los  linksy  ver  algunos  vídeos  también. 


Capítulo  1  -JavaScript  de  hace  10 
minutos 


Batallitas  del  abuelo 

En  este  capítulo  hablaré  de  la  historia  de  nuestra  Industria  y  como  hemos  llegado 
hasta  donde  estamos.  Algunos  lectores  ya  estaréis  familiarizados  con  esto  y  no 
necesitáis  repasar  nuestra  historia.  En  tal  caso...  simplemente  pasad  al  siguiente 
capítulo. 


Voy  a  contarte  una  historia  que  narra  el  sacrificio  y  la  lucha  diaria  de  un  grupo  inmenso  de 
personas  por  todo  el  mundo  que  creyeron,  que  una  idea  tan  genial  como  interconectar  or¬ 
denadores  podría  llegar  a  ser  la  mejor  forma  de  compartí  reí  conocí  miento  de  la  humanidad, 
convirtiendo  Internet  en  una  maravillosa  y  muy  valiosa  herramienta  para  la  humanidad. 

Para  llegar  hasta  donde  estamos  hoy...  mucha  sangre  de  unicornio  se  ha  derramado. 

Y  ahora  nos  pondremos  serios  para  hablar  de  nuestra  industria. 


La  historia  de  nuestra  industria 


Lecturas  recomendadas: 


•  History  ofthe  Internet  by  Melih  Bilgil 

•  What  ¡s  the  Internet?  by  Code.org 


La  Evolución  de  la  web  desarrollada  por  el  equipo  de  Google  Chrome  es  un  portal  que  nos 
permite  visualizar  los  hitos  más  importantes  en  la  historia  de  la  web  desde  1991  hasta  2013. 

1991  -1993 

Los  primeros  años  de  la  web  pasan  en  mucha  calma.  Se  crea  HTTP  y  HTML1  dando  el 
pistoletazo  de  salida  para  que  empezara  el  mundo  web.  El  primer  navegador  web  gráfico, 
Mosaic. 
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1994-1995 


Surgen  los  tres  navegadores  principales  de  la  época;  Netscape  Navigator,  Opera  e  Internet 
Explorer.  Se  oficializa  HTML2  y  rápidamente  es  sustituido  por  HTML3. 

Por  primera  vez  se  pueden  usar  cookies,  pero  aún  estábamos  muy  lejos  de  tener  que  poner 
disclaimers,  claro  que  por  aquel  entonces,  internet  era  mucho  más  salvaje  y  menos  regulado. 
En  un  intento  firme  para  hacer  la  web  más  segura,  y  permitir  cosas  tan  futuristas  por  aquel 
entonces  como  el  comercio  electrónico,  se  implementa  la  capa  SSL  y  asi  se  crea  el  HTTPS, 
IMAPS,  POP3S,  SMTPS,  FTPS,  etc. . . 

Corría  el  año  1995,  cuando  Brendan  Eich  creo  Mocha,  a  petición  de  Netscape  con  la  idea 
de  tener  algún  lenguaje  de  programación  disponible  en  la  web  (lado  de  cliente).  Luego  se 
renombraría  como  LiveScript,  para  finalmente  ser  JavaScript.  Una  estrategia  de  marketing 
dudosa,  que  sigue  hoy  en  día  sembrando  dudas  planteando  que  Java  y  JavaScript  son 
cercanos  o  iguales,  lo  que  es  completamente  falso. 

Además  a  lo  largo  de  ese  año,  comienza  una  escalada  de  problemas  para  todos  los  desa¬ 
rrolladores  del  mundo,  conocido  como  “Browser  Wars”  que  hasta  hoy  en  día,  seguimos 
sufriendo  sus  efectos. 

Básicamente,  cada  navegador  decide  hacer  las  implementaciones  de  los  distintos  com¬ 
ponentes  que  vendrán  en  los  años  venideros  de  manera  diferente,  lo  que  obligaba  a  los 
webmasters  a  tener  que  hacer  su  código  compatible  para  todos  los  navegadores  al  mismo 
tiempo,  replicando  esfuerzos  y  entorpeciendo  el  trabajo  diario.  Si  a  esto  le  sumamos  que 
por  aquel  entonces  los  navegadores  no  se  autoactualizaban,  llegamos  así  a  una  situación 
realmente  compleja  y  atípica  que  podría  haberse  evitado. . .  pero  por  aquel  entonces  Internet 
era  tan  solo  un  producto  novedoso  con  el  que  no  se  sabía  muy  bien  como  se  monetizaría 
nada. 

Para  intentar  recordar  un  poco  como  era  navegar  entonces,  algunos  nostálgicos  recordarán 
la  usabilidad  de  la  web  en  aquella  época,  con  contadores  de  visitas,  gifs  animados,  fotogra¬ 
fías  pixeladas  y  mezclas  de  color  únicas.  Era  la  infancia  de  la  web,  y  aún  se  puede  recordar 
en  sitios  como  The  world’s  Worst  Website  Ever. 


74e  E30¡¡D0Bn  qsQiBq 


eu 


bOqi 


The  world’s  Worst  Website  Ever  -  Logo 


Dejamos  esta  época  de  internet  con  39,14  Millones  de  usuarios. 


1996-1998 

Arrancó  esta  época  con  un  número  inicial  de  usuarios  de  100  millones,  para  terminar  con 
183,91  millones. 

Internet  Explorer  introduce  una  nueva  etiqueta  html  iframe,  que  permite  la  carga  de  una 
página  web  dentro  de  otra. 
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En  esta  época,  todavía  se  maquetaban  las  paginas  web  dentro  de  tablas.  Conceptos  como 
hojas  de  estilos  estaban  muy  lejos  de  ser  viables.  Van  surgiendo  tecnologías  claves  para  suplir 
carencias  básicas  de  interacción,  interconectividad  y  visualización. 

En  esta  época  surgen  tecnologías  como  los  Applets  de  Java,  Flash,  etc... 

XML  se  convierte  en  el  formato  de  intercambio  de  datos  más  extendido. 

En  cuanto  a  HTML,  sigue  evolucionando,  pasando  rápidamente  a  la  versión  3.1  y  4,  permi¬ 
tiendo  la  separación  de  la  parte  visual  con  CSS2.  Por  primera  vez  contenido  y  disposición 
gráfica  de  la  información  se  separan. 

Empieza  la  era  dorada  de  Flash.  Por  el  momento  CSS  solo  es  un  chiste  comparado  con  las 
capacidades  de  Flash. 

Mosaic  muere  en  su  versión  2.1,  Internet  empieza  a  ser  un  mercado  potencial.  Se  crean  los 
primitivos  sitios  web  de  Google,  Yahoo!,  AltaVista  y  Amazon. 


Web  Archive: 


•  Google  Prototipo  en  1998 

•  Google  Beta  en  1998 

•  Amazon  en  1998 


1999-2007 

Fueron  tiempos  locos...  con  el  cambio  de  siglo,  Internet  se  consolido  creando  la  famosa 
“Burbuja  puntocom”  que  empezó  a  cocinarse  entorno  a  1997,  pero  que  termino  de  explotar 
en  2001-2002. 

Sobrevivimos  al  efecto  2000,  con  305,09  millones  de  usuarios. 

Internet  Explorer  introduce  ActiveX  en  la  web.  Se  introducen  los  primero  borradores  de 
Ajax.  En  2006  se  introduce  en  los  navegadores  XMLHTTPRequest2  y  empieza  la  navegación 
asincrona,  lo  que  permite  crear  webs  realmente  dinámicas,  que  no  necesitan  una  gran 
renderización  en  el  lado  del  servidor. 

Esto  hace  posible  la  mejora  en  el  desarrollo  de  las  primeras  plataformas  de  redes  sociales 
(Web  2.0).  Poco  a  poco  en  esta  época,  el  peso  de  JavaScript  va  creciendo,  ya  que  gran  parte 
del  procesamiento  pronto  se  hará  en  el  lado  del  cliente. 

En  la  parte  más  visual  se  empieza  a  introducir  de  manera  experimental  conceptos  comoSl/G 
y  Can  vas. 

Aparecen  en  escena  Facebook,  Twitter,  Linkedin,  Youtube,  etc...  creando  el  embrión  de  lo 
que  luego  serían  otras  redes  sociales. 

Aparece  JQuery,  una  librería  para  JavaScript  que  cambió  para  siempre  la  forma  de  interac¬ 
tuar  entre  JavaScript  y  HTML/CSS.  En  los  años  venideros,  muchos  maquetadores  utilizarán 
esta  librería  como  puerta  de  entrada  a  JavaScript. 
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La  época  dorada  del  PHP  (pre-Wordpress),  como  motor  de  innovación  para  la  web  con 
proyectos  como  PHPBB,  llegará  a  su  fin. 

Con  la  llegada  de  Wordpress  (2003),  Joomla  (2005),  etc. . .  la  web  sufrirá  en  años  sucesivos  un 
cambio  drástico. 

Los  proyectos  se  dividirán  en  aquellos  que  puedan  ser  realizados  con  un  CMS  (principalmen¬ 
te  en  PHP)  y  otros  que  necesitarán  de  un  trabajo  a  medida. 

El  mítico  Netscape  se  despide  para  siempre  con  la  versión  9  y  nace  Firefox. 

Termina  2007  con  1.500  millones  de  usuarios  en  Internet. 


Web  Archive: 


•  Amazon  en  2000 

•  Google  en  2000 

•  Google  en  2005 

•  Facebook  en  2005  (AboutFace) 

•  Facebook  en  2005 

•  Amazon  en  2005 

•  Youtube  en  2005 


2008  en  adelante... 

Empieza  una  nueva  era...  lo  nativo  va  poco  a  poco  desterrando  las  soluciones  arcaicas  y 
obsoletas  como  Applets,  Flash,  ActiveX. . . 

HTML5  y  CSS3  dan  el  empujón  que  hacía  falta  para  que  la  web  despegara.  Chrome  nace  justo 
aprovechando  estos  cambios  de  paradigma. 

Todo  aquello  que  podía  hacerse  con  Flash,  ahora  podrá  hacerse  mejor  y  más  rápido  de  ma¬ 
nera  nativa  juntando  las  tres  fuerzas  más  imponentes  de  la  web,  CSS3,  HTML5  y  JavaScript. 

Se  abre  el  desarrollo  hacia  una  web  mucho  más  semántica  con  filosofías  responsive,  y 
empieza  la  era  del  “Internet  en  la  palma  de  la  mano”  con  los  smartphones. 

La  popularidad  y  capacidad  de  la  nueva  Internet  ocasionarán  un  cambio  de  paradigma  que 
trastocará  todo.  Poco  a  poco,  las  aplicaciones  de  escritorio  serán  sustituidas  por  aplica¬ 
ciones  web,  ocasionando  una  migración  masiva  de  desarrolladores  hacia  el  trio  de  la  web 
(HTML,  CSS  y  JavaScript). 

A  lo  largo  de  los  años  siguientes,  serán  muchas  las  empresas  que  decidan  dar  soporte  a 
JavaScript  en  sus  productos  para  asegurarse  acceder  a  una  masa  crítica  de  programadores, 
este  es  el  caso  de  los  Scripts  para  Photoshop,  Unity,  etc. . . 

También  veremos  que  la  complejidad  de  conseguir  desarrolladores  de  APPs  Nativas  (Java, 
Swift y  Objetive-c)  forzará  a  que  lleguen  los  sistemas  híbridos,  donde  JavaScript,  HTML  y  CSS 
serán  todo  el  conocimiento  necesario  para  entrar  en  el  mundo  de  los  smartphones,  gracias 
a  soluciones  como  PhoneGap. 
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La  fiebre  por  extender  JavaScript,  irá  mucho  más  allá  de  lo  imaginado  y  encontrará  en 
Node.js  la  pieza  que  faltaba  para  encajar  en  ciertos  entornos  como  las  aplicaciones  de 
escritorio,  o  la  gestión  de  redes. 

Todo  ello,  permite  que  JavaScript  deje  de  ser  un  lenguaje  exclusivo  de  la  web  para  ir  mucho 
más  allá,  adentrándose  incluso  en  el  desarrollo  del  Internet  ofThings  (loT)  y  la  Robótica  con 
librerías  como  Cyclon.js,  J5,  etc. . . 

Internet  de  alta  velocidad  y  la  fibra  óptica  supusieron  una  gran  mejora  en  las  comunicacio¬ 
nes,  lo  que  ayudó  a  crear  una  Internet  mucho  más  rica  en  contenido.  En  2011  ya  se  maneja- 
ban27.483  PB/mes,  frente  a  los  10.000  PB/mesde2007.  La  logística  y  lastelecomunicaciones 
jugarán  un  papel  importantísimo  en  el  futuro  desarrollo  de  nuestro  planeta. 


Web  Archive: 


•  Google  en  2010 

•  Google  en  2015 

•  Amazon  en  2010 

•  Amazon  en  2015 

•  Youtube  en  2010 

•  Youtube  en  2015 

•  Facebook  en  2010 

•  Facebook  en  2015 


El  largo  camino  del  Developer 

Este  esquemático  mapa  mental,  puede  ayudaros  a  visualizar  lo  que  está  ocurriendo  hoy  en 
día  en  la  web,  y  comprender  como  los  profesionales  de  la  industria,  hemos  ido  migrando  de 
nombres  y  funciones  hasta  donde  estamos  ahora  mismo,  que  no  es  definitivo  y  lógicamente 
seguirá  evolucionando. 

Una  historia  de  evolución 

Muy  lejos  quedan  los  tiempos  en  los  que  ser  Webmaster  era  suficiente  para  gestionar  todo 
lo  que  tenia  que  ver  con  la  web,  desde  programación  a  gestión  de  los  usuarios,  pasando  por 
el  primitivo  Marketing  de  la  época. 

La  web  fue  evolucionando  rápidamente  a  nivel  de  desarrollo,  aquel  webmaster  multiusos, 
paso  a  dividirse  en  dos  grandes  y  muy  diferenciados  roles: 

Diseño 

Encargado  de  hacer  los  diseños  básicos  con  algún  programa  de  la  suit  de  Adobe  o 
similar. 

En  ocasiones  también  se  encargaba  de  la  parte  de  Flash,  para  crear  animaciones  y 
transiciones. 
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Programación 

Realizaba  todas  las  tareas  de  desarrollo:  JavaScript,  PHP,  Bases  de  datos,  formularios, 
hosting,  etc...  Las  webs  de  entonces  no  eran  muy  complejas,  gran  parte  de  la  lógica  se 
hacía  en  el  servidor  y  el  verdadero  reto  era  lograr  los  objetivos  con  la  tecnología  de  la 
época. 

Aquellos  eran  los  viejos  tiempos. . .  era  como  construir  los  primeros  aviones.  Materiales  como 
la  tela  y  madera  servían  para  construir  todo  el  entramado  del  fuselaje,  un  motor  potente, 
unos  controles  sencillos  y  ya  estabas  volando. 

A  medida  que  la  web  fue  evolucionando,  su  complejidad  también  creció  exponencialmente, 
y  como  consecuencia  inmediata,  la  programación  se  dividió  en  dos  grandes  áreas. 

Diseñador/Maquetador 

Antes  con  el  diseño  era  suficiente.  Pero  poco  a  poco,  el  diseñador  va  asumiendo  com¬ 
petencias  básicas,  para  descargar  de  trabajo  meramente  estático  a  los  programadores, 
que  se  centrarían  en  hacer  la  parte  menos  visual. 

Ahora  el  diseñador  tomará  la  iniciativa  y  convertirá  los  diseños  en  HTML  y  CSS. 

Front-End  developer 

Algunos  desarrolladores,  deciden  que  asumirán  las  funciones  de  interacción  del  lado 
del  cliente  (JavaScript)  y  dejando  el  servidor.  En  muchas  ocasiones,  el  diseño  quedará 
fuera  de  sus  competencias. 

A  medida  que  JavaScript  dejó  de  usarse  solo  para  interpretación  y  empezó  a  ganar 
fuerza  frente  al  renderizado  total  de  datos  en  el  servidor,  se  migrará  de  JQuery  hacia 
JavaScript  nativo  y  a  las  librerías  MV*  como  Angular,  Backbone,  Ember... 

Back-End  developer 

El  desarrollo  en  el  servidor  también  sufrirá  muchos  cambios.  Poco  a  poco,  se  migrará 
de  proyectos  web  que  basan  la  mayor  parte  de  su  programación  en  el  renderizado 
de  HTML,  CSS  y  JavaScript,  desde  el  servidor  a  la  creación  de  APIs,  donde  prima  el 
aislamiento  del  procesamiento  de  la  información. 

En  cuanto  a  lenguajes  de  programación,  poco  a  poco  se  irá  viendo  que  más  y  más 
sistemas  y  lenguajes  se  esforzarán  por  entrar  en  el  mundo  de  internet  con  nuevas 
librerías  y  arquitecturas.  Apache  logra  hacer  de  puente  para  muchos,  pero  a  la  larga 
surgirán  alternativas. 

Mientras  tanto,  muchas  iniciativas  asaltan  la  web  con  ideas  innovadoras  como  desarro¬ 
llo  ágil,  extreme  Programming  (XP). 

El  software  libre  acabó  convirtiéndose  en  el  standard  dentro  del  sector  gracias  al  mítico 
LAMP. 

Las  bases  de  datos  también  evolucionarán  y  tendremos  que  convivir  con  dos  maneras 
de  entender  el  almacenaje,  SQLy  NoSQL.  Lo  que  supondrá  una  dificultad  añadida  para 
el  desarrollo  de  nuevos  proyectos. 

Otras  áreas  como  la  inteligencia  artificial  y  Blg  data  irán  poco  a  poco  demandando  su 
hueco,  por  lo  que  dentro  del  backend  iremos  viendo  nuevas  áreas  de  especialización. 
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Full  Stack  Developer 

Surge  una  nueva  clase  de  desarrolladores,  que  por  avatares  del  destino  no  se  encasillan 
en  el  back  o  en  el  front. 

Y  serán  capaces  de  adentrarse  en  ambos  mundos  y  suplir  las  necesidades  de  los 
equipos  en  estos  dos  frentes.  Cada  Full  Stack  Developer  será  diferente,  cada  uno  será 
especialista  en  unas  areas,  y  en  otras  pasará  de  largo. 

Mantenerse  al  día  en  la  industria  es  cada  vez  más  difícil.  En  cuestión  de  unos  pocos  años 
pasamos  de  construir  aquellos  aviones  básicos  con  tela  y  madera  a  desarrollar  cohetes 
capaces  de  surcar  una  galaxia. 

Nuestra  industria  se  vio  totalmente  superada.  El  crecimiento  de  Internet  no  era  ni  de  lejos 
acorde  a  la  cantidad  de  profesiones  capaces  de  suplir  esta  demanda.  Esto  creó  un  efecto 
llamada  que  desató  la  llegada  de  muchos  nuevos  desarrolladores,  que  no  sienten  esta 
profesión  con  la  pasión  de  aquellos  que  empezamos  a  construir  un  Internet  mejor,  nosotros 
realmente  creíamos  en  lo  que  hacíamos  y  como  lo  hacíamos. 

La  asimilación  de  programadores  obsoletos  de  otras  áreas  y  ajenos  a  la  industria,  condicio¬ 
nará  mucho  la  manera  de  trabajar,  especialmente  con  JavaScript. 

Básicamente  podría  decirse  que  esta  industria  se  divide  entre  artesanos  y  mercenarios. 


Una  realidad  caótica. 

A  medida  que  esto  crece,  las  barreras  para  entrar  en  la  industria  o  cambiar  de  rol  dentro  de 
ella,  aumentan. 

Para  hacernos  una  ligera  idea  de  lo  que  necesitamos  saber  en  las  diversas  áreas,  os  dejo  este 
esquema. 

Cosas  que  todos  deberíamos  saber 

•  Manejo  de  Git/Github. 

•  Entender  como  funciona  HTTP  y  las  APIs. 

•  Manejo  básico  de  terminal/consola. 

•  Trabajar  con  FTP. 

•  Manejo  de  SSH. 
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¿Qué  se  espera  de  un  Front-End  Júnior? 

•  Conocimiento  bueno  de  HTML5. 

•  Conocimiento  bueno  de  CSS3. 

•  Bases  de  testing. 

•  Llamadas  AJAX. 

•  Trabajo  con  librerías  como  JQuery. 

•  Conocimientos  básicos  de  alguna  librería  MV*. 

¿Qué  se  espera  de  un  Front-End  Sénior? 

•  Lo  mismo  que  de  un  Júnior,  pero  en  mayor  profundidad  y  con  experiencia. 

•  Gestión  de  tareas  Gulp,  Grunt,  etc. . .). 

•  Preprocesadores  CSS. 

•  Trabajo  con  Flexbox. 

•  Dominio  del  desarrollo  Responsive. 

•  Gestión  de  dependencias  RequireJS,  Webpack,  Browsefy,  etc..). 

•  Dominio/manejo  fluido  de  un  framework  MV*. 

•  Conocimientos  de  Node.js. 

•  Conocimientos  muy  sólidos  de  JavaScript  Patrones  de  diseño,  ES6,  etc..). 

•  Conocimientos  avanzados  sobre  HTML5  APIs. 

•  Buenas  prácticas  (documentación,  refactorización,  etc...). 

¿Qué  se  espera  de  un  Back-End  Júnior? 

•  Conocimientos  sólidos  de  programación  (Algoritmia,  lógica,  etc. . .). 

•  Saber  trabajar  con  bases  de  datos  relaciónales  y/o  no  relaciónales. 

•  Bases  de  una  buena  arquitectura  (modularidad,  microservicios,  etc...). 

•  Bases  de  nuevas  arquitecturas  NoBackend,  Serverless,  WebSockets,  etc...). 

•  Desarrollo  de  aplicaciones  seguras. 

•  Conocimientos  de  protocolos  como  OAuth,  HTTP  (server  side),  etc.. 

•  Al  menos  un  lenguaje  de  programación  con  un  buen  nivel. 

•  Trabajar  con  fluidez  con  un  motor  de  plantillas. 

•  Bases  de  HTML5  y  CSS3. 

¿Qué  se  espera  de  un  Back-End  Sénior? 

•  Lo  mismo  que  de  un  Júnior,  pero  en  mayor  profundidad  y  con  experiencia. 

•  Despliegue  en  Servidores  y  servicios  en  la  nube. 

•  Al  menos  dos  lenguajes  de  programación  de  Backend. 

•  Buen  nivel  de  JavaScript. 

•  Bases  de  Node.js  para  la  automatización  Yeoman,  Gulp,  etc..). 

•  Bases  de  la  Integración  continua  Jenkins,  TravisCI,  etc...). 

•  Experiencia  con  varias  bases  de  datos  diferentes. 

•  Gestión  de  cacheo  Nginx,  etc...). 

•  Creación  de  APIs. 

•  Integración  con  otras  plataformas  y  servicios. 

•  Shell  Scripting. 
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En  el  centro  del  huracán:  JavaScript 


Lecturas  recomendadas: 


•  The  Deep  Roots  of  JavaScript  Fatigue  by  Calvin  French-Owen 

•  El  estado  del  desarrollo  Front-End  en  2015  porAshley  Nolan 

•  Flow  it  feels  to  learn  JavaScript  in  2016  by  José  Aguinaga 

•  State  ofjs 

•  Flow  to  avoid  JavaScript  fatigue  andsleep  well  at  night  byJosh  Mock 

•  The  Magpie  Developer 

•  The  Sad  State  of  Web  Development 

•  Aresponseto  The  Sad  State  of  Web  Development— Its  notabout  JavaScript  really 

•  Flow  one  developer just  broke  Node,  Babel  and  thousands  ofprojects  ¡n  11  Unes 
of  JavaScript 

•  Is  left-pad  Indicative  ofa  Fragile  JavaScript  Ecosystem? 

•  Overcomlng  JavaScript  Fatigue 

•  ¿Y si  el  software  Open  Source  desapareciera? 


Para  los  desarrolladores  de  JavaScript,  todo  ha  sido  complicado,  ya  que  el  crecimiento 
exponencial  de  las  necesidades  de  todo  Internet  ha  pasado  por  este  lenguaje. 

Al  ser  el  único  lenguaje  que  se  puede  ejecutar  en  el  navegador,  muchos  desarrolladores  han 
tenido  que  pasar  por  el  aro  y  aprenderlo. 

Otros  muchos,  han  tenido  que  crear  librerías  y  frameworks  para  intentar  hacerlo  más 
sencillo  y  ágil. 

Estos  y  más  factores,  han  hecho  que  lleguemos  a  un  punto  de  no  retorno  que  oficialmente 
se  conoce  como  JavaScript  Fatigue. 
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Durante  estos  años  JavaScript  se  hace  adulto  de  la  mano  de  Ryan  Dahl  cuando  se  libera 
Nodejs. 

Node.js  supone  un  antes  y  un  después  en  toda  la  industria.  No  solo  para  los  desarrolladores 
de  JavaScript,  ya  que  Node.js  no  es  únicamente  un  entorno  para  desarrollar  servidores  de 
internet  clásicos  (Http).  Ya  que  su  fuerte  está  en  los  nuevos  paradigmas  que  maneja. 

Cosas  como  la  asincronía,  la  orientación  a  eventos  y  el  paralelismo...  lo  convierten  rápida¬ 
mente  en  uno  de  los  entornos  de  desarrollo  más  rápido. 

Que  fuera  multiplataforma,  se  basará  en  el  motor  V8  de  Google  e  incluyera  un  gestor  de 
paquetes  tan  evolucionado  como  NPM,  hacen  de  Node.js  una  herramienta  ideal  para  hacer 
cosas  tan  diversas  como  aplicaciones  de  red,  automatización  de  tareas,  etc. . . 

A  l0js 

Y  no  tardaron  mucho  en  llegar  los  ttjsDramas  cuando  la  comunidad  de  Nodejs  decide 
separarse  en  dos,  /O  .JS  y  Nodejs. 

Creando  una  brecha  que  muchos  consideraron  insalvable.  Al  final  Node.js  reabsorbe 
a  lO.js  y  acepta  todos  los  cambios  y  la  evolución  que  se  deseaba  originalmente. 

Mas  información... 


A  su  vez,  Node.js  crea  un  peculiar  efecto  de  absorción  y  fusionamiento  de  roles  entre  el 
frontEnd  y  backEnd,  ya  que  ahora  no  existe  una  barrera  de  lenguaje  real  entre  el  back  y  el 
front.  Solo  es  necesario  aprender  Node.js  para  entrar  en  el  mundo  del  back. 

Como  consecuencia  se  crean  nuevos  developers  de  JavaScript,  a  los  que  cada  vez  más,  se 
les  exige  conocer  y  manejarse  con  Node.js. 


Revolución...  ¡Revolución! 


Lecturas  recomendadas: 


•  History  ofGnu,  Linux,  Free  and  Open  Source  Software  (Revolution  OS) 

•  Platform  as  a  Service  (PaaS) 

•  Manifiesto  por  el  Desarrollo  Ágil  del  Software 


A  lo  largo  de  estos  años,  muchas  cosas  han  cambiado  en  el  mundo  del  desarrollo  del 
software. 

Para  empezar  se  crearon  nuevas  maneras  de  entender  el  entorno  de  desarrollo.  Ya  no  solo 
basta  con  crear  nuestro  código  y  subirlo  al  servidor  vía  FTP  sin  más. 
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dev  test  prod 


Imagen  de  z2-environment 

Ahora  es  importante  seguir  una  filosofía  de  desarrollo  más  compleja,  donde  debemos  usar 
un  control  de  versiones  como  Git. 

Nuestro  entorno  local  ya  no  se  conectará  directamente  al  servidor  de  producción  para  subir 
los  cambios  en  los  proyectos,  pasaremos  primero  por  el  entorno  de  testing,  y  una  vez 
sepamos  que  todo  funciona  como  debería,  será  subido  a  producción. 

Las  subidas  a  producción,  deberán  de  ser  frecuentes,  ya  no  será  necesario  tener  una  release 
completa  para  hacer  subidas  a  producción. 

Entramos  en  la  era  del  desarrollo  ágil,  la  programación  extrema  y  la  computación  en  la  nube. 
El  tener  servidores  físicos  en  los  sótanos  de  la  empresa,  se  eliminará  a  favor  de  sistemas 
como  Google  Cloud,Amazon  Web  Services,  Heroku  u  otros  proveedores. 

Todo  será  mucho  más  modulary  escalable,  todo  estará  mucho  más  interconectado,  e\login 
social  cambiará  la  manera  de  autentificarnos. 

Ya  no  reinventaremos  la  rueda  tan  a  menudoydependeremos  mucho  másde  APIsysistemas 
de  terceros. 

El  software  libre  dejó  de  sonara  cosa  rara. 

La  mayor  parte  de  los  servidores  de  internet  montarán  distribuciones  Linux.  La  colaboración 
entre  desarrolladores  de  manera  altruista  bajo  el  sistema  del  software  libre,  creará  algunos 
de  los  lenguajes,  librerías  y  sistemas  más  sólidos. 

Esta  idea  de  libertad,  se  extiende  como  la  pólvora  y  da  pie  a  extender  estas  filosofías  a  otras 
áreas  como  a  la  cultura  con  licencias  Creative  Commons  o  al  mundo  del  hardware  con  el 
Hardware  libre 

Al  tener  un  entorno  libre  del  que  nutrirse  muchos  desarrolladores  empiezan  a  innovar. 
Rápidamente  la  comunidad  les  sigue,  se  van  constituyendo  nuevos  ciclos  y  formatos  de 
innovación. 

Algunas  empresas,  poco  a  poco,  verán  este  valor  y  migrarán  de  un  modelo  más  tradicional 
de  software  privativo  a  uno  más  abierto  y  libre. 

Cambiarán  muchas  cosas,  XML  será  destronado  y  JSON  será  el  nuevo  rey.  Se  idearán  nuevas 
maneras  de  gestionar  el  tiempo  real  como  WebSockets. 

Surgirán  iniciativas  con  ideas  tan  potentes  como  Nobackend,  que  plantearán  nuevos  pa¬ 
radigmas,  pero  sobretodo  la  innovación  y  la  creatividad  empujarán  sobre  manera  -como 
nunca  antes-  el  mundo  del  software. 
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Precisamente  la  innovación  pasará  a  formar  parte  del  ADN  de  nuevos  tipos  de  empresas 
como  las  Startups.  El  MVP  y  el  prototipado  serán  un  concepto  mainstream  al  igual  que  la 
metodología  Lean  Startup. 


Capítulo  2  -  Hola  Mundo 


Fiero  veterano 

En  este  capítulo,  hablaremos  sobre  como  es  la  computación  y  que  se  espera  de 
un  desarrollador.  SI  ya  domináis  algún  lenguaje  de  programación  o  sencillamente 
queréis  empezar  ya  mismo  con  JavaScript,  pasad  al  siguiente  capítulo. 


Un  mundo  de  máquinas 

Seguramente,  cuando  abras  este  libro  tendrás  un  objetivo  sencillo  en  mente,  aprender 
JavaScript. 

Pero  antes  de  hablar  de  JavaScript,  no  es  mala  idea  emplear  un  poco  de  tiempo,  en  aprender 
algunas  cosas  de  interés  sobre  el  entorno  de  JavaScript. 

JavaScript  es  un  lenguaje  más  de  tantos  que  existen.  Cada  lenguaje  tiene  unas  característi¬ 
cas  y  unas  propiedades  especiales  que  lo  hacen  más  o  menos  apto  para  según  que  objetivos. 
Eso  explica  la  existencia  de  tantísimos  lenguajes  de  programación,  y  que  los  programadores 
nos  repartamos  en  función  de  los  lenguajes  que  utilizamos  y  manejamos. 

Los  lenguajes  de  programación  y  los  que  utilizamos  los  humanos  no  son  tan  diferentes  en 
cuanto  al  objetivo  principal,  que  es  comunicarnos.  En  el  caso  de  los  lenguajes  de  los  hu¬ 
manos  la  idea  principal  es  que  podamos  comunicarnos  y  transmitir  nuestras  ideas  entre  los 
individuos.  Cuando  se  habla  de  lenguajes  de  programación,  el  objetivo  es  lograr  establecer 
una  comunicación  fluida  con  una  máquina/sistema/protocolo/etc... 

Al  igual  que  en  los  lenguajes  humanos  encontramos  muchas  similitudes  entre  si  en  cuanto  a 
estructuración,  los  lenguajes  de  programación  suelen  compartir  una  base  común  en  cuanto 
a  estructuras  y  funcionalidades  que  toda  máquina  es  capaz  de  comprender,  tales  como 
funciones,  bucles,  variables,  condicionales,  etc. . . 

La  parte  más  pura  de  la  computación,  lógica,  abstracción  y  la  capacidad  de  sintetizar  una 
solución  para  un  problema,  en  sentencias  que  una  máquina  pueda  entender  y  ejecutar. 

Los  ordenadores  son  máquinas  multipropósito  que  pueden  ser  programadas.  En  función  de 
su  programación  pueden  hacer  más  o  menos  cosas  y  hacerlas  de  una  forma  concreta. 

Por  si  mismas,  las  máquinas  no  son  capaces  de  razonar  y  tomar  sus  propias  decisiones, 
excepto,  que  hablemos  en  el  ámbito  de  la  inteligencia  artificial,  donde  se  busca  entre  otras 
cosas  lograr  máquinas  y  sistemas  que  aprendan. 

Por  lo  general,  en  computación  siempre  hablaremos  de  sistemas  dentro  de  sistemas  y  que 
han  sido  programados...  es  como  una  pirámide  que  cobra  todo  su  sentido  cuando  por  fin 
tenemos  cada  uno  de  sus  componentes  correctamente  alineados. 
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JavaScript  es  un  lenguaje  de  programación  de  alto  nivel,  que  se  ejecuta  dentro  de  los 
navegadores,  a  excepción  de  Node.js.  Esto  quiere  decir  que  nuestro  código  necesita  mucho 
código  previo  para  funcionar. 

Por  ejemplo,  un  sistema  operativo  (Linux,  Windows,  Mac..)  que  gestiona  programas  como  el 
navegador  (Firefox,  Chrome,  IE,  etc...)  y  estos  a  su  vez  gestionan  cómo  se  representan  los 
entornos  visuales  en  las  pantallas,  los  sonidos,  etc. . . 

Sabiendo  todo  esto,  al  final  del  día  nuestro  código  puede  sufrir  fluctuaciones  a  la  hora  de 
ejecutarse  en  función  del  entorno  que  estemos  usando,  por  suerte,  el  navegador  gestionará 
de  manera  automática  gran  parte  de  todo  esto,  pero  aún  así  podemos  sufrir  gran  cantidad 
de  variaciones  debido  a  que  cada  navegador  “interpreta”  nuestro  JavaScript  lo  mejor  que 
puede,  aunque  no  de  la  misma  forma. 

Uno  de  nuestros  principales  cometidos,  será  hacer  que  nuestro  código  sea  capaz  de  lograr 
los  objetivos  que  nos  proponemos  independientemente  de  la  plataforma  donde  se  vaya  a 
ejecutar,  aunque  a  esto  ya  estaréis  familiarizados  con  el  día  a  día  desarrollando  con  HTML5 
y  CSS3. 

Pensar  como  un  programador 


Lecturas  recomendadas: 


•  Dorít  learn  to  code.  Learn  to  think  by  Yevgeny  Brikman 

•  Linus  Torvalds:  La  mente  detrás  de  Linux 

•  What  Most  Schools  Dorít  Teach  by  code.org 

•  Computer  Science  is  for  everyone  by  Hadi  Partovi 

•  The  early  days  by  Steve  Wozniak 

•  Hackyour  Ufe  in  48  hours  by  Dave  Fontenot 

•  You  Should  Learn  to  Program  by  Christian  Genco 


Programar  es  un  arte  y  el  programador  debería  ser  un  artesano,  aunque  también  existen 
otros  puntos  de  vista  menos  románticos  sobre  nuestra  profesión. 

Las  máquinas  y  los  sistemas  son  geniales  haciendo  una  única  cosa,  seguir  pasos....  La 
responsabilidad  de  todo  programador  en  relación  a  las  máquinas  es  ser  capaz  de  guiarlas 
con  las  instrucciones  más  precisas. 

Adiferencia  de  un  artesanoconvencional,eldecódigo,  puedeevaluarla  belleza  de  un  código 
basándose  en  ciertos  criterios.  No  se  trata  solo  de  que  la  máquina  logre  el  objetivo  deseado, 
se  trata  también  de  no  llegar  a  ese  objetivo  con  un  código  feo,  desastroso  e  ineficiente. 

En  programación  existen  criterios  como  consistencia,  rendimiento,  integridad,  complejidad 
ciclomática,  nivel  de  abstracción,  etc...  Estos  criterios  determinan  la  calidad  de  un  código. 

Esto  a  su  vez  nos  lleva  al  análisis  de  nuevos  problemas  relacionados  con  la  legibilidad  y  el 
mantenimiento  de  nuestro  código.  El  balance  es  muy  complicado  y  por  ello  un  programa 
jamás  llega  a  ser  perfecto,  recuerda  que  al  final,  el  programador  sigue  siendo  humano... 
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Programar  requiere  aprender  una  nueva  forma  de  pensar 

Mucha  gente  omite  este  paso  y  acaba  perdida  en  un  infinito  desierto  de  agonía  y  de¬ 
sesperación  cuando  se  estancan...  y  se  ven  incapaces  de  resolver  ciertas  situaciones 
que  surgen  en  el  día  a  día  de  un  programador. 


Cosas  como  la  metaprogramación  y  el  pensamiento  abstracto  serán  dos  objetivos  loables  a 
los  que  debes  aspirar  como  buen  artesano  del  código. 

No  te  preocupes  querido  lector,  porque  tus  hijos  no  sufrirán  este  tormento,  ya  que  están 
aprendiendo  programación  de  la  manera  más  ágil  y  divertida,  centrándose  en  el  pensa¬ 
miento  abstracto  y  dejando  los  lenguajes  de  programación  para  más  adelante. . .  cosas  como 
Scratch  o  Bitbloq  se  encargan  de  ayudarles  con  esta  ardua  tarea  de  una  manera  amena. 

Pero  para  los  adultos  es  otra  historia. . .  por  eso,  antes  de  aterrizar  en  el  siguiente  capítulo, 
deberíamos  emplear  un  poco  másdetiempo  aprendiendo  las  basesde  la  programación  con 
pseudocódigo. 

Las  máquinas  procesan  el  mundo  de  manera  binaria,  no  existen  las  escalas  de  grises,  por  eso 
el  programador  debe  asumir  que  tiene  que  interiorizar  y  empatizar  con  la  única  forma  de  ver 
el  mundo  que  tienen  las  máquinas.  Debe  aprender  a  pensar  de  una  manera  más  “binaria”, 
esto  traerá  consigo  beneficios  más  allá  de  la  computación,  como  es  aprender  a  resolver 
problemas  complejos,  dividir  tareas,  etc...  y  así  aumentará  enormemente  su  creatividad. 
Aprenderá  de  los  errores  como  nunca  antes,  tendrá  nuevos  retos  cada  día  y  cuando  los 
supere,  la  satisfacción  será  increíble... 

Aprender  a  programar  no  tiene  edad. 


Pseudocódigo 

El  pseudocódigo  nos  permite  aislarnos  del  lenguaje  sobre  el  que  finalmente  deseamos 
programar  y  nos  centra  en  la  base  lógica  más  pura  de  la  programación,  lo  que  nos  permite 
adentrarnos  en  el  problema  en  sí  y  en  su  resolución...  sin  tener  que  preocuparnos  de 
particularidades  de  cada  lenguaje  y  su  entorno  de  ejecución. 

No  vamos  a  hablar  de  todas  las  posibilidades  que  nos  aporta  el  pseudocódigo,  pero  si 
hablaremos  de  algunas  estructuras  que  resultarán  interesantes  para  nuestro  aprendizaje 
orientado  a  JavaScript. 

Aunque  no  es  necesario  realizar  nuestro  pseudocódigo  en  un  entorno  específico,  existen  pro¬ 
gramas  como  Pselnt,  que  intentan  dotar  de  un  entorno  completo  a  nuestro  pseudocódigo. 

Por  todo  ello,  los  ejemplos  que  veremos  en  este  capítulo  están  basados  en  la  sintaxis  y 
funcionamiento  de  Pselnt.  También  incluyo  su  equiparación  con  JavaScript  a  modo  de 
referencia. 


¡Note  agobies! 

Es  normal  que  haya  cosas  que  no  entendamos  de  JavaScript  en  los  próximos  ejem¬ 
plos,  para  eso  tenemos  el  resto  del  libro... 
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Variables 

Cuando  programamos,  podemos  crear  variables  que  son  pequeños  espacios  de  memoria  a 
los  que  ponemos  un  nombre  como  “nombre_usuario”,  y  que  nos  permite  almacenar  datos 
que  posteriormente  podremos  modificar  si  deseamos. 

•  En  Pseudocódigo: 

1  //  Esto  es  un  comentario 

nombreUsuar io  =  "Pepe" 
nombreOtroUsuar io  =  "Roberta" 

•  Equiparación  en  JavaScript: 

1  //  Esto  es  un  comentario 

var  nombreUsuar io  =  "Pepe"; 

var  nombreOtroUsuar io  =  "Roberta"; 


Interacción  con  el  usuario 

Podemos  pedir  al  usuario  que  nos  facilite  algún  tipo  de  dato,  almacenarlo  en  una  variable  y 
también  podemos  mostrarle  información. 

•  En  Pseudocódigo: 

1  //  Le  mostraremos  el  siguiente  mensaje 

Escribir  "hola  usuario!  ¿Cómo  te  llamas?" 

3 

4  //  Almacenamos  su  respuesta  en  una  variable 

5  Leer  nombreUsuario 

•  Equiparación  en  JavaScript: 

1  //  Le  mostraremos  el  siguiente  mensaje 

2  var  mensaje  =  "hola  usuario!  ¿Cómo  te  llamas?"; 

3 

4  //  Almacenamos  su  respuesta  en  una  variable 

5  var  nombreUsuario  =  prompt(mensaje) ; 


Como  podemos  ver...  a  la  hora  de  equiparar  este  mensaje  en  JavaScript,  he  metido  ciertos 
cambios  para  agilizar  el  algoritmo  y  adaptarlo  al  contexto  de  JavaScript  en  el  navegador. 
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Estructuras  condicionales 

Cuando  necesitamos  que  el  sistema  tome  decisiones,  debemos  plantearle  las  múltiples 
opciones  en  una  estructura  condicional  concreta. 

Para  que  la  lógica  del  sistema  pueda  decidir,  necesitamos  reducir  todo  a  comparaciones 
susceptibles  de  devolver  un  valor  booleano  (verdadero  o  falso). 

Por  ejemplo: 

•  Operaciones  matemáticas 

-  1+1  =  2 

-  5  es  mayor  que  3 

-  -5  es  menor  que  cero 

•  Operaciones  lógicas 

-  La  variable  “nombreUsuario”  es  igual  a  “Pepe” 

-  La  variable  “nombreUsuario”  no  está  vacía 

A  la  hora  de  representar  las  opciones.  Pselnt  nos  da  dos  opciones  principales.  La  estructura 

51.,  entonces  y  Según,  la  diferencia  en  este  contexto  está  en  función  del  número  de  opciones. 

En  el  caso  d eS/... 

Entonces  solo  manejamos  dos  opciones  cuando  la  condición  se  cumple,  y  cuando  no 
se  cumple. 

En  el  caso  de  Según 

Podemos  manejar  múltiples  valores  y  con  ello  múltiples  opciones  sobre  las  que  el 
sistema  deberá  decidir. 

Si  una  condición  puede  cumplirse  en  múltiples  casos,  el  sistema  se  decidirá  por  la 
primera  e  ignorará  el  resto. 

51.. .  Entonces 

•  En  Pseudocódigo: 

1  Si  1  +  1  ==  2  Entonces 

Escribir  "La  suma  es  correcta" 

3  Sino 

4  Escribir  "La  suma  es  incorrecta" 

5  Fin  Si 
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•  Equiparación  en  JavaScript: 

1  if  (1  +  1  ===  2)  { 

consolé . log( "La  suma  es  correcta") 

3  }  else  { 

consolé . log( "La  suma  es  incorrecta") 

5  }; 


Según 


•  En  Pseudocódigo: 


Escribir  "hola  usuario!  ¿Cómo  te  llamas?" 

2  Leer  nombreUsuario 

Según  nombreUsuario  Hacer 
4  "Pepe" : 

Escribir  "Hola  Pepe!  Yo  te  conozco" 

6  "Lucia": 

Escribir  "Hola  Lucia!  Yo  te  conozco" 
8  De  Otro  Modo: 

Escribir  "Eres  nuevo...  Bienvenido!" 
10  Fin  Según 

•  Equiparación  en  JavaScript: 


1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 


var  nombreUsuario  =  prompt("hola  usuario!  ¿Cómo  te  llamas?") 

switch(nombreUsuario)  { 
case  "Pepe" : 

consolé . log( "Hola  Pepe!  Yo  te  conozco"); 

break ; 

case  "Lucia" : 

consolé . log( "Hola  Lucia!  Yo  te  conozco"); 

break ; 
default : 

consolé . log( "Eres  nuevo...  Bienvenido!"); 


Bucles 


En  ocasiones  nuestro  algoritmo  requerirá  ejecutar  una  serie  de  instrucciones  de  manera 
repetitiva  hasta  que  cierta  circunstancia  cambie.  Esto  en  programación  se  conoce  como 
bucles,  básicamente  tenemos  tres  tipos. 

Al  existir  tres  tipos,  surge  la  duda  de  saber  si  realmente  existen  diferencias  significativas  entre 
ellos. 

Como  es  normal  existen  ciertas  diferencias  en  el  manejo  de  las  interacciones,  pero  todos  los 
bucles  mantienen  una  estructura  y  funcionamiento  común  que  se  divide  en  dos  partes: 
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Condición 

Nos  permite  definir  cual  es  la  condición  que  debe  cumplirse  para  que  nuestro  programa 
decida  si  hay  que  entrar/seguir  en  bucle  o  ignorarlo/salir. 

El  dominio  de  esta  parte  del  bucle  nos  asegurará  no  caer  en  bucles  infinitos  o  bucles 
que  nunca  serán  ejecutados. 

Instrucciones 

Es  un  conjunto  de  comandos  que  serán  ejecutados  una  vez  el  bucle  haya  validado  las 
condiciones. 


Tipos  de  bucles 
•  While  (Mientras) 

Está  pensado  para  aquellos  bucles  que  requieran  de  una  condición  lógica  y  no  mate¬ 
mática  para  validar  la  iteracción. 


Aunque  lógicamente  podremos  mezclar  entre  las  diversas  condiciones  (matemáti¬ 
cas  y  lógicas). 


-  En  Pseudocódigo: 

1  vuelta  <-  0 

2  Mientras  vuelta  <  100  Hacer 

3  Escribir  vuelta 

4  vuelta  =  vuelta  +  1 

5  Fin  Mientras 

-  Equiparación  en  JavaScript: 

1  var  vuelta  =  0; 

2 

while(vuelta  <  100){ 

4  consolé. log(vuelta) 

5  vuelta++  //  vuelta  =  vuelta  +1 

6  } 

•  For(Para) 

Está  diseñado  específicamente  para  trabajar  con  series  de  números  (longitud  de  ca¬ 
dena,  elementos  de  un  array,  propiedades  de  un  objeto,  etc...)  y  nos  provee  de  una 
estructura  más  sencilla  para  gestionar  el  flujo. 

-  En  Pseudocódigo: 

Para  v_numerica< -v_inicial  Hasta  vuelta  <  100  Con  Paso  vuelta  =  vuelta  +  1  Hacer 

2  Escribir  vuelta 

3  Fin  Para 
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-  Equiparación  en  JavaScript: 

1  for(var  vuelta  =  0;  vuelta  <  100;  vuelta++  ){ 

2  consolé. log(vuelta) ; 

3  } 

•  Do...  While  (Repetir...  Hasta  Que) 

Este  bucle  funciona  de  una  manera  diferente.  Altera  el  orden  al  que  estamos  acostum¬ 
brados,  ya  que  primero  ejecutará  el  código  una  vez  y  luego  evaluará  si  debe  repetirse. 

-  En  Pseudocódigo: 

1  dato  <-  Falso 

2  Repetir 

Escribir  "Al  menos  una  vez..." 

4  Hasta  Que  Dato  ==  Verdadero 

-  Equiparación  en  JavaScript: 

1  var  Dato  =  false; 

2 

3  do  { 

4  consolé . log( "Al  menos  una  vez..."); 

5  }  while(Dato) 

Funciones  o  subprocesos 

Las  funciones  son  estructuras  de  código  que  nos  permiten  reutilizar  en  gran  medida  nuestro 
código,  gracias  a  que  encapsulan  instrucciones  en  su  interior. 

Las  funciones  pueden  realizar  dos  acciones  principales,  de  manera  independiente  o  interre¬ 
lacionadas. 

Pueden  modificar  el  valor  de  las  variables  que  están  fuera  de  la  función  (ámbito  global)  o 
retornando  un  nuevo  valor  al  final  de  su  ejecución. 

Otra  de  las  características  que  hacen  de  las  funciones  estructuras  muy  valiosas,  es  el  uso  de 
argumentos.  Esto  es  una  especie  de  variable  que  se  declara  junto  a  la  ejecución  y  que  no 
tiene  ningún  valor  hasta  que  no  llamemos  a  la  función. 

A  la  hora  de  llamar  a  la  función  podemos  pasarle  parámetros  que  son  valores  con  los  que  la 
función  podrá  realizar  todo  tipo  de  operaciones. 

Todo  sistema,  incluso  PSelnt,  dispone  de  funciones  que  han  sido  creadas  para  facilitar 
nuestro  trabajo,  como  son  las  funciones  matemáticas  que  nos  permiten  calcular,  desde 
valores  absolutos  hasta  logaritmos,  pasando  por  funciones  de  azar  para  generar  números 
aleatorios. 
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También  existen  funciones  propias  según  el  tipo  de  dato  con  el  que  trabajemos,  como  es 
el  caso  de  las  cadenas  de  texto,  donde  podemos  convertir  su  valor  a  números  o  saber  la 
longitud  total  de  los  caracteres  que  lo  componen,  etc. . . 

Hablaremos  de  todo  esto  en  próximos  capítulos. 

Operadores  especiales 

En  todo  lenguaje  de  programación  encontraremos  ciertos  operadores  comunes  que  nos 
facilitarán  tareas,  como  son: 

Algebraicos 

Relacionados  con  operaciones  matemáticas  (sumar,  restar,  multiplicar,  dividir...). 

Relaciónales 

Relacionados  con  comparaciones  entre  elementos  (distinto  a,  igual  que,  menor  que, 
mayoro  igual  que...). 

Lógicos 

Permiten  encadenar  validaciones  entre  elementos.  Y  (conjunción)  y  O  (disyunción). 
Por  ejemplo:  ((es  usuario)  Y  (está  registrado))  O  (es  un  invitado). 


Capítulo  3  -  consolé. log("Hola 
Mundo"); 

JSHint 


Es  una  herramienta  clave  para  nuestro  día  a  día,  ya  que  nos  permite  detectar  errores 
comunes  en  el  código  JavaScript  que  desarrollemos. 

Para  usuarios  más  avanzados  es  recomendable  utilizar  esLint,  ya  que  nos  proporciona 
múltiples  configuraciones  avanzadas. 

JSHint  puede  ser  utilizado  directamente  desde  la  web  o  como  un  plugin  más  en  tu  editor 
favorito. 

O  Más  información: 

•  JSHint  Online 

•  JSHint  About 

•  JSHint  Repository 


Consola 


La  herramienta  más  utilizada  será  la  consola  de  JavaScript,  que  es  una  de  las  múltiples 
utilidades  que  nos  ofrecen  los  navegadores  para  depurar  nuestro  código. 

Si  ya  desarrollas  habitualmente  utilizando  CSS  y  HTML,  estarás  familiarizado  con  este  con¬ 
junto  de  herramientas  y  su  potencial,  si  no  deberías  seguir  estos  sencillo  pasos. 

Yo  personalmente,  prefiero  utilizar  Google  Chrome  aunque  sin  duda  Mozilla  Firefox,  también 
es  una  buena  opción  para  depurar  y  desarrollar  nuestro  código. 

Para  hacer  uso  de  la  consola...  necesitamos  llamara!  objeto  consolé. 

O  Más  información: 

•  @ChromeDevTools  en  Twitter 

•  Chrome  DevTools 
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Métodos  destacados: 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .assertf) 

Aparece  un  mensaje  de  error  en  la  consola  si  la  afirmación  es  falsa. 

1  var  controlador  =  false; 

consolé . assert(controlador,  " \"controlador\"  es  igual  a  \"false\""); 

•  .clear() 

Limpia  la  consola. 

1  consolé . clear( ) 

•  -dir() 

Retorna  una  lista  interactiva  de  las  propiedades  de  un  objeto. 

1  consolé . dir(document . body) ; 

•  .dirxml() 

Retorna  una  representación  HTML  del  objeto. 

1  consolé . dirxml (document . body ) ; 

Agrupadores 

.  .group() 

Crea  un  grupo  de  mensajes  de  consola. 

•  .groupCollapsed() 

Crea  un  grupo  de  mensajes  de  consola  minimizados  por  defecto. 

1  consolé . groupCol lapsed( "bucleFor" ) ; 

for(var  i =100;  i>0;  i  -){ 

consolé . info( " Iteración  numero  %i",  i) 

4  } 

5  consolé . groupEnd( ) ; 

•  .groupEnd() 

Cierra  el  grupo  de  mensajes. 
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Tablas 

•  .table() 

Muestra  los  datos  dentro  de  una  tabla. 

1  var  lenguajes  =  [ 

{  nombre:  "JavaScript",  extensión:  ".js"  }, 

3  {  nombre:  "TypeScr ipt" ,  extensión:  ".ts"  }, 

4  {  nombre  "Cof feeScr ipt" ,  extensión  ".coffee"  } 

5  ]; 

6 

7  consolé . table( lenguajes) ; 

8  consolé . table( lenguajes,  "extensión"); 

Gestión  del  tiempo 

•  .time() 

Inicia  un  contador  en  ms. 

•  .timeEnd() 

Para  el  contador  y  devuelve  el  resultado. 

1  consolé . time( "Medición  de  miArray"); 

2  var  miArray  =  new  Array (1 000000 ) ; 

for  (var  i  =  miArray . length  -  1;  i  >=  0;  i--)  { 

4  miArray  [i]  =  new  ObjectQ; 

5  }; 

6  consolé . timeEnd( "Medición  de  miArray"); 

Notificadores 

•  -log() 

Saca  un  mensaje  por  consola. 

1  consolé . log( "Hola  en  formato  clásico"); 

•  .info() 

Saca  un  mensaje  por  consola  con  un  estilo  informativo. 

1  consolé . info( "Hola  en  formato  informativo"); 

•  .warn() 

Saca  un  mensaje  por  consola  con  un  estilo  alerta. 

1  consolé . warn( "Hola  en  formato  alerta"); 

•  .error() 

Saca  un  mensaje  por  consola  de  error,  con  los  mismos  estilos,  creando  confusión. 
No  se  recomienda  su  uso. 
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consolé . error( "Hola  en  formato  error"); 

Formateadores 


Formato  Descripción 


%s 

Cadena 

%d  o  %¡ 

Número  entero 

%f 

Decimal 

%o 

DOM 

%0 

Objeto  js 

%c 

CSS 

Ejemplos: 

•  %o  para  estructuras  del  DOM: 

1  var  párrafos  =  document .  getElementsByTaglMame(  "p" ) ; 

2  consolé . log( "DOM :  %o",  párrafos); 

•  %0  para  objetos  JS: 

1  var  objeto  =  { "nombre" : "Yo" , "Apel 1  ido" : "Mismo" } ; 
consolé . log( "Objeto :  %0",  objeto); 

•  Usando  CSS: 

1  consolé . log( ' Esto  es  aburrido...1 2); 

consolé . log( 1 %c  Pero  se  puede  mejorar  fácilmente!  'background:  #3EBDFF ;  colo\ 

3  r:  #FFF ;  font-size : 25px; ' ) ; 


Caracteres  especíales: 


Incluyendo  ciertos  caracteres  especiales  en  nuestras  cadenas  de  texto,  podemos  maquetar 
el  resultado  que  se  imprimirá  por  la  consola. 


•  \t  Tabulador 

•  y  Comillas  Simples 

•  \"  Comillas  Dobles 

•  \n  Salto  de  línea 


1  consolé . log( "Hasta  aquí...  todo  correcto.  Ahora  vamos  a  \"tabular\" : \tves?  Ya  est\ 

2  amos  más  lejos . \n\ ' Otra  linea  ;-)\'") 
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Comentarios 


Los  comentarios  nos  ayudan  a  entender  nuestro  código,  en  ocasiones  podemos 
utilizarlos  para  silenciar  temporalmente  partes  del  código. 


Algunos  desarrolladores  aconsejan  utilizar  JSDoc,  como  un  sistema  para  determinar  como 
debe  comentarse  de  manera  sistemática  nuestro  código. 

Al  utilizar  JSDoc  puedes  exportar  esos  comentarios  como  un  fichero  Html,  que  nos  permitirá 
documentar  nuestro  proyecto  fácilmente. 

Como  regla  general  es  mejor  poner  comentarios,  que  no  ponerlos.  También  puedes  usar  los 
comentarios  de  una  forma  más  eficiente  si  referencias  (urls)  a  la  documentación  en  el  caso 
de  las  librerías. 

•  Una  línea 

1  //  Comentario  en  una  línea 

•  Múltiples  líneas 

1  /* 

2  Una  Línea. . . . 

3  Otra  1  i nea .  .  . 

4  Etc. . . 

5  V 

•  JSDoc 

1  /** 

2  *  Represents  a  book . 

3  *  §constructor 

4  *  §param  {string}  title  -  The  title  of  the  book. 

5  *  §param  {string}  author  -  The  author  of  the  book. 

6  */ 

function  Book(title,  author)  { 

8  } 


Nombres  de  variables 


Las  variables  tienen  unas  reglas  muy  especificas  que  debemos  seguir  a  la  hora  de  designar 
sus  nombres. 

•  Debemos  usar  nombres  que  expliquen  que  aporta  esa  variable  a  nuestro  código. 

•  No  se  pueden  usar  espacios. 
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1  var  con  espacios  =  1; 

•  No  usar  un  número  delante. 

1  var  1  numero  =  1; 

•  Evitar  símbolos  y  snake_case. 

1  var  con_guiones_ba jos  =  1;  //snake_case  es  poco  común  en  JavaScript 

2  var  dame$  =1;  //en  serio? 

•  Usar  camelCase. 

1  var  otraOpcion  =  1; 

2  var  opcionCon!23123  =  1; 


Truco 

Si  estas  realizando  cambios  en  un  código  que  sigue  una  pauta  distinta  a  cameCase. 
¡Síguelo! 


La  coherencia  en  el  código  es  más  importante,  recuérdalo. 


Tipos  de  variables 

Un  primer  paso  para  dominar  los  tipos  de  variables  es  utilizar  el  operador  typeof,  y  conocer 
su  especificación. 

Tipado  Débil  vs.  Tipado  Fuerte 

Las  variables  en  JavaScript  no  necesitan  ser  declaradas  teniendo  en  cuenta  el  tipo 
de  dato  que  contienen,  como  sucede  en  otros  lenguajes 

Es  importante  conocer  los  tipos  de  variables  disponibles: 

•  Undefined 

1  typeof  undefined 
typeof  noDefinido 
typeof  tampocoCreado 
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•  Object 


1 

typeof 

nuil 

2 

typeof 

[15,  4] 

3 

typeof 

new  Date() 

4 

typeof 

{  a  :  1 } 

• 

Boolean 

1 

typeof 

false 

2 

typeof 

true 

3 

typeof 

Boolean( false) 

• 

Number 

1 

typeof 

3 

2 

typeof 

3.14 

3 

typeof 

NaN 

4 

typeof 

Inf inity 

•  String 

1  typeof  "hola" 

•  Function 


1  typeof  function( ) { } 

Existe  un  tipo  más...  Symbol  pero  pertenece  a  ECMA6,  es  por  ello,  que  no  lo  desarrollamos 
aquí. 


Matemáticas  Básicas 

Las  matemáticas  básicas  en  JavaScript  son  muy  similares  a  cualquier  lenguaje. 
El  único  operador  matemático  que  puede  resultarnos  extraño  es  el  módulo. 

1  var  suma  =5+4; 

2  var  resta  =10-6; 

3  var  multiplicación  =3*3; 

4  var  división  =6/2; 

5  var  modulo  =  43  %  10; 

Trabajando  con  Decimales 

En  JavaScript  el  decimal  1.0  y  el  entero  1,  son  ¡guales. 

consolé . log( (5 . 0+1 )  ===  (5+1))  //  true 


1 

2 

3 

4 

5 

1 

2 

3 

4 

5 

6 
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Matemáticas  Básicas  (Agrupando  operaciones) 

Con  los  paréntesis  fácilmente  se  pueden  priorizar  operaciones. 

El  orden  de  ejecución  empieza  por  los  paréntesis,  luego  multiplicaciones  y  divisiones...  para 
terminar  con  sumas  y  restas. 

var  expresionl  =  (3+7)  *  10; 

var  expresion2  =  (-56  *  6)  -  74  *  -25; 

var  expresion3  =  (3  *  3)  +  10  -  12  /  2; 

var  expresion4  =  44  +  (83  %  (33  +  100)); 

var  expresion5  =  -145  +  (500  /  10  -  5)  +  10  *  10  ; 

Matemáticas  Básicas  (crecimiento  y  decrecimiento) 

El  crecimiento  y  decrecimiento,  puede  suceder  antes  o  después  que  el  valor  de  la  variable 
sea  leído  por  el  navegador,  en  función  de  dónde  se  sitúa  el  operador  (++antes  o  después++). 

var  numero  =  5; 

consolé . log( -  numero);  //  4 
consolé. log(numero-- ) ;  //  5  (luego  4) 
consolé . log(++numero) ;  //  6 
consolé. log(numero++) ;  //  5  (luego  6) 


Operadores  de  asignación 

Estos  operadores,  nos  permiten  alterar  de  manera  sencilla  y  controlada  el  valor  de  una 
variable. 


•  =  Asignación 

1  var  x  =  1 ; 

2  var  y  =  2; 

3  x  =  y; 

consolé . info( "\"x\"  vale  ",  x); 

•  +=Suma 
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1  var  x  =  1 ; 
var  y  =  2; 

x  +=  y;  //  x  =  x  +  y 

consolé . info( "\"x\"  vale  ",  x); 


1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 

15 

16 


Capítulo  3  -  consolé. log(“Hola  Mundo”); 


38 


•  -=  Resta 

1  var  x  =  1 ; 
var  y  =  2; 

3  x  -=  y;  //  x  =  x  -  y 

4  consolé . info( " \"x\"  vale  ",  x); 

•  *=  Multiplicación 

1  var  x  =  1 ; 

var  y  =  2; 

3  x  *=  y ;//  x  =  x  *  y 

4  consolé . info( " \"x\"  vale  ",  x); 

•  /=  División 

1  var  x  =  1 ; 

2  var  y  =  2; 

x  /=  y;  //  x  =  x  /  y 
4  consolé . info( " \"x\"  vale  ",  x); 

•  %=  Módulo  (Resto) 

1  var  x  =  1 ; 

2  var  y  =  2; 

x%=y;  //  x  =  x  Z  y 

4  consolé . info( " \"x\"  vale  ",  x); 

Jugando  con  variables 

Si  ejecutas  el  siguiente  fragmento  de  código,  verás  lo  fácil  que  resulta  perder  el  control  de 
nuestras  variables,  si  no  tenemos  mucho  cuidado. 

var  empezoComo3  =  3; 
era3( ) ; 

empezoComo3  =  35; 
era3( ) ; 

empezoComo3  =  empezoComo3  +  30; 
era3( ) ; 

empezoComo3  +=  4; 
era3( ) ; 

empezoComo3++ ; 
era3( ) ; 


empezoComo3  -=  12; 


17 

18 

19 

20 

21 

22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 
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era3( ) ; 

empezoComo3- - ; 
era3( ) ; 

empezoComo3  *=  10; 
era3( ) ; 

empezoComo3  /=  11; 
era3( ) ; 

empezoComo3  +=  "texto"; 
era3( ) ; 

empezoComo3  +=  20; 
era3( ) ; 

empezoComo3++ ; 
era3( ) ; 


function  era3  ( )  { 

consolé . log( "empezoComo3  debería  ser  3,  ahora  su  valor  es  "  +  empezoComo3) ; 

}; 


Interacción  Básica  con  el  Usuario 


Puedes  ¡nteractuar  con  el  usuario  desde  JavaScript,  utilizando  unos  métodos  sencillos  que 
ya  vienen  implementados  en  todos  los  navegadores.  Esto  hace  unos  años  era  muy  común  y 
poco  a  poco  se  convirtió  en  una  mala  práctica. 

O  El  propio  navegador,  ofrece  al  usuario  la  posibilidad  de  bloquear  esta  interacción. 

Lo  ideal  es  gestionar  esta  interacción  con  el  usuario  desde  el  HTML,  como  veremos 
en  próximos  capítulos. 

En  el  caso  de  depuración  y  prototipado  de  código  puede  ser  un  recurso  muy  útil. 
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•  Window.  alert() 

Muestra  nuestro  mensaje  en  una  ventana. 

1  alert( "  ¡Bienvenido  a  esta  web!"); 

•  Window. confirm() 

Pregunta  al  usuario  y  ofrece  dos  botones  que  se  traducen  en  valores  booleanos.  Aceptar 
(true)  y  cancelar  o  cerrar  la  ventana  (false). 

1  conf irm( " ¿Está  seguro  que  desea  abandonar  esta  web?"); 

Ejemplo: 

1  var  respuesta  =  conf irm( "presiona  un  botón!"); 

if  (respuesta  ===  true)  { 

consolé . log( "Has  aceptado!"); 

4  }  else  { 

5  consolé . log( "Has  cancelado"); 

6  } 

•  Window.prompt() 

Pregunta  al  usuario  y  permite  la  escritura  devolviendo  el  mensaje. 

1  prompt( " ¿Como  te  llamas?"); 

Registremos  los  datos  en  una  variable: 


i 


var  nombre  =  prompt( " ¿Como  te  llamas?"); 


Parte  II  -  Mecánica  del 
lenguaje 
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Capítulo  4  -  Comparadores 

Operadores  de  Comparación 


Muchos  de  los  comparadores,  mayor  que,  menor  que,  igual  que,  etc...  ya  los  conocemos. 
Pero  en  JavaScript  tenemos  un  comparador  adlcclonal,  que  nos  permite  comparar  entre  dos 
elementos,  no  solo  por  su  valor,  también  por  su  tipología. 


var  mayorQue  =  100  >  10; 
var  menorQue  =  10  <  100; 
var  mayorlgual  =  100  >=  10; 
var  menorlgual  =  10  <=  100; 
var  igual  =  10  ==  10; 

var  igualTotalmente  =  10  ===  10;  //  Ojo!  Usamos  también  === 
var  nolgual  =  100  !=  10; 


Como  regla  general,  será  imperativo  utilizarlo  siempre  que  comparemos  entre  valores  el  ===, 
ya  que  debemos  asegurarnos  que  no  nos  den  “gato  por  liebre”,  confirmando  que  son  iguales 
ambos  datos  en  valor  y  tipo  de  dato. 

Veamos  el  siguiente  ejemplo: 


var  igual  =  10  ==  10;  //  true 

var  igualCadena  =  10  ==  "10";  //true 

var  igualTotalmente  =  10  ===  10;  //  true 

var  igualTotalmenteCadena  =  10  ===  "10";  //false 

var  nolgual  =  100  !=  10;  //  true 

var  nolgualCadena  =  100  !=  "100";  //  false 

var  nolgualTotalmente  =  100  !==  10;  //  true 

var  nolgualTotalmenteCadena  =  100  !==  "100";  //  true 


Operadores  Lógicos 

Podemos  concatenar  validaciones  y  así  evaluar  expresiones  más  complejas. 

En  JavaScript  disponemos  de  &&  (todo  debe  resolverse  como  verdadero)  y  ||  (Al  menos  uno  de 
los  elementos  debe  ser  verdadero) 
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•  AND(&&) 


i 

consolé . log(true  &&  true); 

// 

true 

2 

consolé . log(true  &&  false); 

// 

false 

3 

consolé . log( false  &&  false); 

// 

false 

4 

• 

consolé . log( false  &&  true); 

OR(||) 

// 

false 

1 

consolé . log(true  ||  true); 

// 

true 

2 

consolé . log(true  ||  false); 

// 

true 

3 

consolé . log( false  [|  false); 

// 

false 

4 

consolé . log( false  ||  true); 

// 

true 

Podemos  también  utilizar  lo  aprendido  hasta  ahora  con  operaciones  matemáticas: 

1 

2 

3 

4 


Todo  puede  ser  booleano 

En  JavaScript  todo  puede  ser  comparado  en  términos  booleanos,  especialmente  si  hacemos 
uso  de  la  función  Boolean(). 

En  general  podemos  saber  cómo  responderá  JavaScript,  si  tenemos  en  cuenta  el  “valor  real” 
de  la  expresión  que  deseamos  validar. 

Por  ejemplo,  una  cadena  de  texto  vacía  (“”)  no  aportará  valor  real,  por  lo  que  será  false. 
Importante  remarcar  que  el  0  y  -0  son  false 

•  Valor  “real”  es  true: 

1  consolé . log( "valor  boleano  de  \"JS!\":",  Boolean( " JS ! \" ) ) ; 
consolé . log( "valor  boleano  de  1235:",  Boolean(1235) ) ; 
consolé . log( "valor  boleano  de  -1235:",  Boolean( -1235) ) ; 
consolé . log( "valor  boleano  de  un  objeto:",  Boolean( {saludo :  "hola"})); 
consolé . log( "valor  boleano  de  un  array:",  Boolean( [ "plátano" ,  -1,  false])); 
consolé . log( "valor  boleano  de  un  array:",  Boolean( function( ) { } ) ) ; 


var  exl  =  true  &&  true;  //  true 

var  ex2  =  (2  ==  2)  &&  (3  >=  6);  //  false 
var  ex3  =(2>3)||(17<=40);  //  true 

var  ex4  =  false  I |  false;  //  false 
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•  Sin  valor  “real”  es  fo/se: 

1  consolé . log( "valor  boleano  de  Boolean( " " ) ) ; 

2  consolé . log( "valor  boleano  de  0:",  Boolean(0)); 
consolé . log( "valor  boleano  de  -0:",  Boolean( -0) ) ; 

4  consolé . log( "valor  boleano  de  nuil:",  Boolean(null ) ) ; 

5  consolé . log( "valor  boleano  de  undefined:",  Boolean(undefined) ) ; 

6  consolé . log( "valor  boleano  de  NaN:",  Boolean(NaN) ) ; 

Asignación  por  igualdad 

Una  manera  ágil  y  dinámica  de  asignar  valor  a  las  variables,  es  haciendo  uso  de  la  asignación 
por  igual.  Básicamente  almacenamos  el  resultado  booleano  de  una  comparación  en  una 
variable  que  podremos  utilizar  más  adelante. 

1  var  administrador  =  'Yo  mismo'; 

2  var  esAdministrador  =  (administrador  ===  'Yo  mismo'); 

3  consolé . log( esAdministrador ) ;  //  true 


Como  ya  vimos  en  pseudocódigo,  una  de  las  estructuras  más  útiles  a  la  hora  de  gestionar  el 
flujo  de  nuestra  aplicación  es  el  uso  de  condicionales. 

If  nos  permite  evaluar  una  condición  y  actuar  en  consecuencia. 

Las  instrucciones  que  se  encuentran  entre  corchetes,  se  ejecutan  solo  cuando  la  condición 
se  cumple. 

Gestiona  la  complejidad 

Dentro  de  una  estructura  condicional  podemos  meter  más  estructuras  condicio¬ 
nales,  además  de  otras  estructuras  típicas  del  lenguaje...  esto  se  conoce  como 
anidación. 

Cuando  la  anidación  es  desmesurada  y  poco  óptima  suele  elevarse  mucho  la  com¬ 
plejidad  ciclomática  de  nuestro  código.  De  esto  hablaremos  en  próximos  capítulos. 
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if (1  ===  1){ 

consolé . log( "1  es  igual  a  1  y  por  eso  me  ejecuto") 

} 

i f (1  ===  "1"){ 

consolé . log( "No  son  del  mismo  tipo  y  por  eso...  este  texto  jamás  será  mostrado  e\ 
n  la  consola . "  ) 

} 


//...  else 


En  ciertas  ocasiones,  necesitaremos  que  nuestro  script  elija  entre  dos  caminos  en  función 
de  si  una  premisa  es  verdadera  o  falsa,  por  eso  JavaScript  nos  permite  utilizar  e/se. 

El  programa  solo  puede  ejecutar  una  de  las  dos  opciones,  por  tanto  una  parte  del  código 
quedará  sin  ejecutarse. 

consolé . log( "pase  lo  que  pase...  esto  se  ejecutará") 

if  (true)  { 

consolé . log( "true,  por  eso  me  ejecuto"); 

}  else  { 

consolé . log( " false,  por  eso  me  ejecuto"); 

} 

consolé . log( "pase  lo  que  pase...  esto  se  ejecutará  también") 


Else  if ... 

Cuando  necesitemos  verificar  diversas  opciones  lo  más  fácil  es  utilizar  else  if,  así  evitamos 
tener  que  anidar  en  exceso. 

Es  importante  recordar  que  la  primera  condición  válida  será  la  que  use  el  interprete  (nave¬ 
gador),  y  que  ignorará  todas  las  demás. 

var  condición  =  2; 
if  (condición  ==  1 )  { 

consolé . log( "1 ,  por  eso  me  ejecuto"); 

}  else  if  (condición  ==  2){ 

consolé . log( "2,  por  eso  me  ejecuto"); 

}  else  { 

consolé . log( "no  es  1  o  2,  por  eso  me  ejecuto"); 

} 


Capítulo  4  -  Comparadores 


46 


Switch 

JavaScript  dispone  de  una  opción  más  para  crear  estructuras  condicionales.  Switch  permite 
crear  estructuras  más  optimizadas  para  cubrir  un  amplio  abanico  de  casos  posibles. 

Por  otra  parte  Switch  tiene  varias  desventajas  notables: 

•  No  tiene  una  sintaxis  sencilla 

•  Es  importante  utilizar  y  comprender  conceptos  propios  como  case,  break  o  default. 

•  En  ocasiones  puede  ser  difícil  de  depurar. 

•  Erróneamente  se  piensa  que  Switch  es  exageradamente  más  rápido  que  if-else,  aunque 
una  simple  prueba  demuestra  lo  contrario. 

•  Entendiendo  la  estructura: 

1  switch(expresión)  { 

2  case  ni : 

3  //Códi go 

4  break; 

5  case  n2 : 

6  //Códi go 

7  break; 

8  default: 

9  //Código 

10  } 

•  Trabajando  con  “casos  únicos”: 

1  var  nombre  =  " " ; 

switch  (nombre)  { 

3  case  "Pepe": 

4  consolé . log( "Hola  Pepe"); 

5  break; 

6  case  "Luis" : 

consolé . log( "Hola  Luis"); 

8  break; 

9  case  "Antonio" : 

10  consolé . log( "Hola  Antonio"); 

11  break; 

12  default: 

13  consolé . log( ' Ninguno  de  los  nombres  que  pensamos...  es  ’+nombre); 

14 


} 
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•  Trabajando  con  “múltiples  coincidencias”: 

1  var  nombre  = 

2  switch  (nombre) 

3  { 

4  case  "Pepe": 

5  case  "Luis" : 

6  case  "Antonio": 

alert('Hola  ’+nombre); 

8  break; 

9 

10  default: 

11  consolé . log( ' Ninguno  de  los  nombres  que  pensamos...  es  ’+nombre); 

12  } 

Operador  Temario 

El  operador  ternario  (?:)  nos  ofrece  una  manera  propia  de  hacer  estructuras  condicionales. 

Este  operador  simplifica  mucho  la  sintaxis  propia  de  los  condicionales,  pero  se  desaconseja 
su  uso  para  operaciones  o  evaluaciones  múltiples. 

O  Si  estás  empezando  con  JavaScript,  debes  tener  en  cuenta,  que  es  un  operador  que 
resulta  difícil  de  recordar  al  principio.  Siendo  bastante  común  su  uso  especialmente 
en  proyectos  desarrollados  con  Node.js. 


Estructura 

•  Entendiendo  la  estructura: 

condición  ?  expresionl  :  expresion2 

•  Múltiples  expresiones  (desaconsejado): 

1  condición  ?  ( 

expresionl , 
expresion2 , 

4  otraexpresion 

5  )  :  ( 

6  expresionl, 

7  expresion2, 

8  otraexpresion 

9  ); 
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•  Evaluaciones  múltiples  (muy  desaconsejado): 

condición  ?  expresionl  :  condicion2  ?  expresionl  :  expresion2; 


Ejemplos 

•  Sencillo: 

1  var  esMiembro  =  true; 

consolé . info( "El  pago  son  "  +  (esMiembro  ?  "20.00€"  "50.00C")); 

•  Evaluación  múltiple  (muy  desaconsejado): 

1  var  esMiembro  =  true; 

2  var  esAdulto  =  true; 

consolé . info(esMiembro  ?  "El  pago  son  20.00C"  :  esAdulto  ?  "Puedes  enviar  la  so\ 
4  licitud  cuando  quieras"  :  "Tienes  que  esperar  aún.  Lo  siento."); 

•  Múltiples  expresiones  (desaconsejado): 

1  var  mensaje, 

2  esMiembro  =  true; 

3 

4  esMiembro  ?  ( 

5  mensaje  =  "El  pago  son  20.00C", 

6  consolé . info(mensaje) 

7  )  :  ( 

8  mensaje  =  "El  pago  son  50.00C", 
consolé. info(mensaje) 

10  ); 


Capítulo  5  -  Bucles 

En  JavaScript  existen  diversos  bucles  que  podremos  utilizar  en  función  de  las  necesidades 
de  nuestro  programa. 

Ahora  veremos  aquellos  bucles  que  son  de  uso  genérico,  pero  existen  variaciones  del  bucle 
for  específicas  para  Arrays  forFoc/i)  y  Objetos  For...  in)  que  veremos  en  próximos  capítulos. 

Para  el  caso  que  os  preocupe  el  rendimiento  de  vuestros  bucles  os  dejo  este  link  con  unos 
benchmarks  bastante  interesantes. 


While 


El  primer  bucle  que  veremos  está  específicamente  diseñado  para  funcionar  de  manera 
constante,  mientras  una  condición  dada  siga  cumpliéndose. 

Este  bucle  está  pensado  para  simplificarnos  la  sintaxis  cuando  el  control  del  bucle  no  se 
realiza  mediante  operaciones  matemáticas  (mayorque...  menorque...). 

Funcionamiento 

•  Estructura: 

1  while  (-Condición-)  { 

- Instrucciones- 

3  }; 

•  Ejemplo: 

1  var  condición  =  true 

while  (condición)  { 

3  consolé . log( "hola" ) ; 

4  condición  =  false; 

5  }; 


For 


Este  bucle  presenta  una  estructura  optimizada  para  controlar  la  ejecución  de  la  iteración  de 
manera  numérica. 

El  bucle  For  se  divide  en  tres  partes  separadas  por  un  punto  y  coma. 
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Expresión  inicial 

Será  todo  aquello  que  se  ejecutará  al  iniciarse  el  bucle. 

Condición 

Será  evaluada  antes  de  cada  iteración.  Este  es  el  único  parámetro  obligatorio. 

Expresión  de  actualización 

Se  ejecutará  al  final  de  cada  iteración. 


Funcionamiento 

•  Estructura: 

for  (-Expresión  inicial-;  -Condición-;  -Expresión  Actualización-)  { 
- Instrucciones- 

3  }; 

•  Ejemplo  clásico: 

1  for  (var  i  =  0;  i  <  10;  i++)  { 
consolé . log( i  ) ; 

3  } 


Do...  While 


El  tercer  bucle  que  veremos  en  este  capítulo  es  Do...  While  que  se  diferencia  de  todos  los 
demás  en  que  se  ejecuta  primero  y  se  evalúa  después. 

Al  utilizar  este  bucle  nos  aseguramos  que  aunque  la  condición  no  se  cumpla...  el  código  se 
ejecuta  al  menos  una  vez. 

Funcionamiento 

•  Estructura: 

1  do{ 

- Instrucciones- 
3  }  while  (-Condición-); 
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•  Ejemplo: 

1  var  i  =  0; 
do  { 

3  i++; 

consolé . log( i ) ; 
}  while  (i  <  10); 


Importante: 

Al  menos  se  ejecutará  una  vez,  aunque  la  premisa  no  sea  verdadera. 


l  do{ 

consolé . warn( "me  ejecuto") 

3  }  while  (false); 


Break  y  Continué 


Dominando  la  eficiencia 

Dos  sentencias  clave  en  JavaScript,  son  breaky  continué,  que  nos  permiten  romper 
o  alterar  el  flujo  normal  de  nuestra  aplicación. 


Pueden  utilizarse  también  con  las  estructuras  condicionales  que  vimos  en  el  capítu¬ 
lo  anterior. 


•  Continué 

Nos  permite  saltar  parte  del  bucle. 

for  (var  i  =  0;  i  <  10;  i++)  { 

2 

3  //  Salta  el  5  y  sigue. . . 

4  if  (i  ===  5)  { 

5  continué; 

6  } 

7 

consolé . log( "El  valor  de  i  es  "+i); 

9  } 
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•  Break 

Nos  permite  salir  del  bucle. 

1  for  (var  i  =  0;  i  <  10;  i++)  { 

2 

3  //  Llega  a  5  y  sale. 

4  if  (i  ===  5)  { 

5  break; 

6  } 

7 

8  consolé . log( "El  valor  de  i  es  "+i); 

9  } 

Errores  comunes 

Bucle  infinito 

Es  un  error  muy  común  y  deberías  evitarlo  a  toda  costa.  Suele  ocurrir  cuando  no  tenemos 
una  estructura  de  control  funcionando  adecuadamente. 

while  (true)  { 

consolé . log( "Este  texto  se  imprime  hasta  el  infinito..."); 

}; 


Bucle  que  no  se  ejecutará 

Igualmente  es  un  error  más  sutil,  pero  por  definición  un  código  que  jamas  se  ejecuta... 
¡sobra! 


while  (false)  { 

consolé . log( "Este  texto  jamas  se  imprimirá..."); 

}; 


Ejemplo: 


var  control  =  1; 
while  (control  <=  10)  { 
consolé . log(control ) ; 
control++ ; 

}; 
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Usos  Avanzados 

Decrecimiento: 

Es  bastante  común  utilizar  este  tipo  de  bucles,  cuando  estamos  trabajando  sobre  la  repre¬ 
sentación  dinámica  de  elementos  en  el  DOM. 

for  (var  i  =  10;  i  >  0;  i--)  { 
consolé . log( i  ) ; 

} 


Anidación: 

Aunque  resulta  muy  tentador...  debemos  de  evitar  en  la  medida  de  lo  posible  la  anidación 
en  JavaScript.  Por  regla  general  anidar  hasta  dos  o  tres  niveles  es  aceptable. 

for  (var  i  =  0;  i  <  10;  i++)  { 

consolé . log( "Estoy  en  el  primer  bucle."); 
for  (var  j  =  10;  j  >0;  j--)  { 

consolé . log( "Estoy  en  el  segundo  bucle") 
consolé . log( "Vuelta :  "  +  i  +  "  -  "  +  j); 

} 

} 


Exprimiendo  el  For 

Si  dominamos  las  tres  partes  básicas  que  componen  el  bucle  for,  podemos  plantearnos 
estructuras  tan  complejas  como  ésta. 

for  (var  i=0,  x  =  1,  z=2,  tope  =  10;  i  <=  tope;  x  *=  z,  i++  )  { 
consolé . log( " i  vale  "+i+",  x  vale  "+x+",  z  vale  "+z); 

} 


Por  lo  general  la  variable  i  suele  reservarse  para  controlar  las  iteraciones  del  bucle, 
aunque  podamos  utilizar  otros  nombres...  esto  suele  estar  muy  aceptado  por  la 
comunidad  y  se  considera  una  buena  práctica. 


Capítulo  5  -  Bucles 


54 


No  refactorizar 

En  ocasiones,  el  código  evoluciona  y  no  repasamos  lo  que  habíamos  construido  previamen¬ 
te.  . .  llegando  a  situaciones  tan  monstruosas  como  ésta. 

•  Antes  de  refactorizar: 

1  //  Código 

2  for  (;i  ===  true; )  { 

3  //  Más  Código 

4  } 

•  Después  de  refactorizar: 

1  //  Códi go 

2  while  (i)  { 

3  //  Más  Código 

4  } 


Capítulo  6  -  Números  y  fechas 

JavaScript  al  igual  que  otros  muchos  lenguajes,  permite  el  trabajo  matemático,  aún  no 
siendo  un  lenguaje  especialmente  diseñado  para  científicos  y  matemáticos. 

A  lo  largo  de  este  capítulo  veremos  que  en  JavaScript  existen  dos  formas  básicas  de  trabajar 
con  los  “números”,  por  un  lado  haciendo  uso  de  Number,  y  por  otro  con  Math,  en  función  de 
la  complejidad  de  nuestros  algoritmos. 

Por  lo  general,  es  interesante  utilizar  ciertas  librerías  clave  que  nos  facilitaran  mucho  el 
desarrollo  cuando  trabajamos  con  temas  numéricos,  os  las  presentaré  a  lo  largo  de  este 
capítulo. 


Numbers 

A  la  hora  de  trabajar  con  números,  puede  darse  el  caso  de  encontrarnos  con  la  notación 
científica  en  vez  del  formato  al  que  estamos  acostumbrados.  Su  valor  y  tipo  de  variable  se 
mantienen  aunque  se  represente  de  forma  diferente. 

Si  deseamos  trabajar  con  unidades  monetarias,  podemos  hacer  uso  de  la  librería  accoun- 
ting.js. 

Propiedades 

•  .MAX_VALUE 

Esta  propiedad  nos  retornará  el  número  (positivo)  más  grande  representable  en  JavaS¬ 
cript: 

var  numerol  =  1 . 7976931 3486231 57e+308; 
var  numero2  =  1 . 7976931348623157e+310; 

function  veri ficarValor Máximo (num) { 

if  (num  <=  Number . MAX_VALUE)  { 

consolé . log( "El  número  no  es  infinito"); 

}  else  { 

consolé . log( "El  número  es  infinito"); 

} 

} 

veri ficarValorMaximo(numerol ) ; 
veri ficarValorMaximo(numero2) ; 
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•  .MIN_VALUE 

Nos  retornará  el  número  (negativo)  más  pequeño  representable  (5e-324) 

1  var  numerol  =  5e-323; 

var  numero2  =  5e-326; 

3 

4  function  verificarValorMinimo(num){ 

5  if  (num  >=  Number . MIN_VALUE )  { 

6  consolé . log( "El  número  no  es  infinito"); 

7  }  else  { 

8  consolé . log( "El  número  es  infinito"); 

9  } 

10  } 

11 

12  veri ficarValorMinimo(numerol ) ; 

13  veri ficarValorMinimo(numero2) ; 

•  .POSITIVEJNFINITY 

Retornará  el  valor  de  la  propiedad  del  objeto  global  Infinity,  es  decir  Infinity. 

1  var  numeroMaximo  =  Number . MAX_VALUE  *  2 

consolé. log(numeroMaximo) ; 

3 

4  if  (numeroMaximo  ===  Number . POSITIVE_INFINITY)  { 

5  numeroMaximo  =  0; 

6  } 

consolé. log(numeroMaximo) ; 

•  .  NEGATIVE_INFINITY 

Retornará  el  valor  negativo  de  la  propiedad  del  objeto  global  Infinity,  es  decir  -Infinity. 

1  var  numeroMinimo  =  ( -Number . MAX_VALUE)  *  2 

consolé . log( numeroMinimo) ; 

3 

4  if  (numeroMinimo  ===  Number . NEGATIVE_INFINITY)  { 

5  numeroMinimo  =  0; 

6  } 

consolé . log( numeroMinimo) ; 

•  .Na  N 

En  ocasiones  al  realizar  operaciones  matemáticas  de  forma  errónea  podemos  encon¬ 
trarnos  con  que  el  valor  de  nuestra  variable  ha  sido  sustituido  por  NAN  (NotA  Number). 
Este  es  un  proceso  irreversible  que  nos  obligará  a  reasignar  el  valor  de  la  variable 
posteriormente.  Hasta  la  llegada  de  ECMA6  la  gestión  y  detección  de  estos  valores  era 
compleja,  pero  con  el  nuevo  método  isNaN()  podemos  solventarlo. 
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l 


2 


NaN  ===  NaN; 

Number.NaN  = 


=  NaN;  //  false 
//  true 


//  false 


3 


isNaN(NaN) ; 


4 


isNaN(Number . NaN) ;  //  true 


Métodos 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .toExponentialO 

Retorna  una  cadena  de  texto  con  el  valor  de  los  números  en  formato  de  potencia. 

1  var  numObj  =  77.1234; 

2 

consolé . log( numObj . toExponential ()) ;  //  7.7í234e+l 

4  consolé . log( numObj . toExponential (4) ) ;  //  7.7123e+l 

5  consolé . log( numObj . toExponential (2) ) ;  //  7.71e+l 

6  consolé . log( 77 . 1234 . toExponential ()) ;  //  7.71234e+i 

•  .toFixedf) 

Retorna  una  cadena  de  texto  con  los  números  decimales. 

Aunque  no  es  la  mejor  forma,  también  podemos  redondear  el  valor. 

1  var  numObj  =  12345.6789; 

2  numObj . toF i xed( ) ;  //' 12346'  redondeo 

Podemos  alterar  la  longitud  (número  de  decimales)  con  el  argumento  que  pasamos  al 
método. 

1  var  numObj  =  12345.6789; 

2  numObj . toFixed( ) ;  //' 12346'  redondeo 

3  numObj .toFixed(l);  // '12345.  7' 

4  numObj . toFixed(6) ;  //' 12345 .678900'  Se  añaden  ceros  en  caso  necesario 

5  ( 1 . 23e+20 ) . toF i xed ( 2 ) ;  // ' 1 23000000000000000000 . 00 ' 

6  (0) . toFixed(2) ;  //'0.00' 

7  2 . 34 . toFixed(l ) ;  //'2.3'  redondeo 

Al  utilizar  valores  decimales  negativos  es  importante  albergarlos  dentro  de  los  parén¬ 
tesis  para  que  respete  el  tipo  de  dato  también. 

1  -2 . 34. toFixed(l ) ;  //-2.3  Números  negativos  no  son  devueltos  como  cadenas. 

( -2 . 34) . toFixed(l ) ;  //'-2.3'  Con  paréntesis  se  salta  la  limitación 


.toLocaleStringO 

Retorna  una  cadena  con  el  valor  representado  en  lenguaje  local. 
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var  numero  =  3500; 

//  En  Local 

consolé . log( numero . toLocaleStr ing( ) ) ; 

//  En  Árabe 

consolé.  log(numero.tol_ocaleString(  ’ar-EG'  ) ) ; 

//  En  Chino  decimal 

consolé . log( numero . toLocaleStr i ng( ' zh-Hans-CN-u-nu- han  idee ' ) ) ; 

.toPrecision() 

Devuelve  un  numero  con  los  decimales  deseados  pero  sin  redondear. 


var  numero  =  5.123456; 
consolé . log( numero . toPrecision( ) ) ; 
consolé. log(numero.toPrecision(5) ) ; 
consolé. log(numero.toPrecision(2) ) ; 
consolé . log( numero . toPrecision(l ) ) ; 
consolé . log((1234.5) . toPrecision(2) ) ; 

.toStñng() 

Devuelve  una  cadena  con  el  número  en  la 
nemos. 


//  5. 123456 
//  5. 1235 
//  5.1 
//  5 

//  1 . 2e+3  (En  ocasiones  ) 

iase  (hexadecimal,  binaria...)  que  determi- 


console . log( (17) . toString( ) ) ;  //  '17' 

consolé . log( (17 . 2 ). toString( )) ;  //  '17.2' 

consolé . log( ( -0xff) . toString(2) ) ;  //  ' -11111111  ' 
consolé . log( (254) . toStr i ng( 16) ) ;  //  'fe' 

.parseFloat() 

Devuelve  un  número  decimal  o  entero  partiendo  de  una  cadena. 

Number . parseFloat( "3 . 14" ) ;  //  3.14 

Number . parseFloat( "314e-2" ) ;  //  3.14 

Number . parseFloat( "0 . 031 4E+2" ) ;  //  3.14 

Number . parseFloat( "3 . 14textos ...") ;  //  3.14 
Number . parseFloat( "ltextos ...") ;  //  1 

.parselntf) 

Devuelve  un  número  entero  partiendo  de  una  cadena. 

Además,  nos  permite  seleccionar  la  base  númerica  sobre  la  que  trabajaremos  (binaria 
con  2,  hexadecimal  con  16,  etc. . .).  Por  defecto  se  utiliza  la  base  10  (decimal). 
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1 

parselnt("  0xF",  16); 

//  i5 

2 

parselnt("  F",  16); 

//  15 

3 

parselnt( "17" ,  8); 

//  15 

4 

parselnt(021 ,  8); 

//  15 

5 

parselnt( "015" ,  10); 

//  15 

6 

parselnt(15 . 99,  10); 

//  15 

7 

parselnt( "15,123" ,  10); 

//  15 

8 

parselnt( "FXX123" ,  16); 

//  15 

9 

parselnt( "lili " ,  2); 

//  15 

10 

parselnt("15*3",  10); 

//  15 

11 

parselnt( "15e2" ,  10); 

//  15 

12 

parselnt( "15px" ,  10); 

//  15 

13 

parselnt( "12" ,  13); 

//  15 

Math 


Math  nos  aporta  infinidad  de  recursos  matemáticos  avanzados  como  la  constante  de  Euler, 
gestión  de  logaritmos,  senos,  cosenos,  tangentes...  Cada  lector  debe  de  indagar  y  valorar  lo 
que  realmente  quiere  usar,  ya  que  muchos  de  estos  métodos  y  propiedades  van  más  allá  de 
nuestros  objetivos,  y  no  aportan  directamente  valor  al  contexto  de  aprender  a  programaren 
JavaScript. 

En  general,  cuando  necesitemos  desarrollar  una  aplicación  con  un  gran  soporte  matemático 
recurriremos  a  librerías  como  Mathjs. 


Métodos 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .round() 

Devuelve  el  valor  de  un  número  redondeado  al  entero  más  cercano. 

1  Math . round(20 . 5) ;  //  21 

Math . round (20 . 49) ;  //  20 

Math . round( -20 . 51 ) ;  //  -21 

•  .Floorf) 

Devuelve  el  máximo  entero  menor  o  igual  a  un  número. 

1  Math . f loor (20 . 5) ;  //  20 

Math . f loor (20 . 49) ;  //  20 

3  Math. f loor (-20. 51);  //  -21 
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•  .random() 

Devuelve  un  número  pseudo-aleatorio  entre  0  y  1. 

-  Número  aleatorio  entre  0  (Incluido)  y  1  (excluido). 

1  Math . random( ) ; 

-  Número  aleatorio  entre  min  (incluido)  y  max  (excluido). 

1  Math . random( )  *  (max  -  min)  +  min; 

2  Math . random( )  *  (11  -  0)  +  0; 

-  Número  entero  aleatorio  entre  min  (incluido)  y  max  (excluido). 

Math . f loor(Math . random( )  *  (11  -  0))  +  0; 


Dates 


Sin  duda,  uno  de  los  elementos  que  más  utilizaremos  a  lo  largo  de  nuestro  camino  por  el 
mundo  de  JavaScript  será  el  manejo  de  fechas. 

Desgraciadamente,  en  JavaScript  el  manejo  de  fechas  es  bastante  complejo  y  poco  intuitivo, 
lo  que  ha  dado  pie,  a  que  existan  muchas  librerías,  que  nos  facilitan  mucho  el  día  a  día.  Entre 
ellas: 

Dates.js 

Que  nos  permite  una  manipulación  rápida  y  precisa  con  una  sintaxis  muy  intuitiva. 

Momments.js 

Que  nos  aporta  mejoras  en  la  sintaxis,  además  de  un  complemento  genial  para  gestio¬ 
nar  zonas  horarias. 

Timeago 

Que  nos  permite  convertir  fechas  a  “hace  xxx  minutos,  segundos,  días...”  de  forma 
dinámica. 


Trabajando  con  fechas 

El  punto  de  partida  es  trabajar  ¡nstanciondo  a  DateQ,  para  poder  tener  nuestra  fecha...  Para 
aquellos  que  estéis  familiarizados  con  la  programación  orientada  a  objetos,  aquí  estamos 
usando  new  para  instanciar  una  nueva  fecha. 

O  Para  aquellos  que  no  estéis  familiarizados  aún,  no  pasa  nada,  porque  hablaremos 
de  ello  más  adelante...  simplemente  recordad,  que  se  utiliza  new  cuando  creamos 
una  nueva  fecha. 


Existen  muchas  formas  de  crear  nuevas  fechas,  en  función  de  que  parámetro  pasamos  a 
Date(m¡_parametro). 
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•  Fecha  Actual 

1  var  ahora  =  new  Date(); 
consolé . log( ahora) ; 

•  Usando  milisegundos  (desde  el  1/1/1970  00:00) 

Muy  recomendable. 

1  var  diaDespues  =  new  Date( 3600*24*1000) ; 
consolé . log( diaDespues) ; 

•  Usando  cadenas  de  texto 

Poco  recomendable. 

1  var  newYear  =  new  Date( " January  1,  2016  00:00:00"); 

•  Usando  números 

Recomendable,  aunque  tiene  cierta  complejidad  oculta  a  simple  vista. 

1  var  newYear  =  new  Date(2016,  1,1);  //  AAAA,  MM,  DD 

2  var  newYear  =  new  Date(2016,  1,  1,  0,  0,  0);  //  AAAA,  MM,  DD,  HH,  MM,  SS 

•  Usando  UTC 

1  var  newYear  =  new  Date(Date . UTC(2016,  1,  1)); 


Métodos 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

En  el  caso  de  las  fechas,  podemos  dividir  casi  todos  los  métodos  en  tres  categorías  principa¬ 
les: 

Getters 

Que  nos  devuelven  información  concreta. 

Setters 

Que  nos  permiten  ajustar  información  concreta. 

Otros 

Que  nos  facilitarán  enormemente  el  trabajo. 


Importante 

Todos  aquellos  métodos  que  son  susceptibles  de  sufrir  variaciones  por  la  zona 
horaria,  cuentan  con  un  “método  clon”  que  realiza  la  misma  función,  pero  siguiendo 
las  especificaciones  de  la  UTC,  como  veremos  a  continuación. 


Por  otro  lado,  los  meses  y  los  días  de  la  semana,  empiezan  a  contarse  desde  el 
0,  y  los  días  de  la  semana  empiezan  en  domingo  siendo  este  el  día  0.  El  resto  de 
componentes  no  sufren  modificaciones  (año,  día  del  mes,  etc..). 
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Versión  UTC: 

var  ahora  =  new  Date(); 
consolé . log( "Con  UTC:  "); 
consolé. log ("====  FECHA  ===="); 

consolé . log( "El  año:  "  +  ahora . getUTCFul lYear( )) ;  //  4  dígitos 

consolé . log( "El  mes:  "  +  ahora . getUTCMonth( )) ;  //  0  -  ii 

consolé . log( "El  día  de  la  semana:  "  +  ahora . getUTCDay( )) ;  //  0  -  6  (D  -  S) 

consolé . log( "El  día  del  mes:  "  +  ahora . getUTCDate( )) ;  //  i -31 

consolé . log( "====  HORA  ===="); 

consolé . log( "Horas :  "  +  ahora . getUTCHours( )) ; 

consolé . log( "Minutos :  "  +  ahora . getUTCMinutes( )) ; 

consolé . log( "Segundos :  "  +  ahora . getUTCSeconds( )) ; 

consolé . log( "mi  1 isegundos :  "  +  ahora . getUTCMi 1 1 iseconds( )) ; 

Versión  Local: 


var  ahora  = 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 
consolé . log( 


//  4  dígitos 
//  0  -  11 
//  0  -  6  (D  -  S) 
//  1-31 


new  Date( ) ; 

"La  fecha  es  "  +  ahora); 

"====  FECHA  ===="); 

"El  año:  "  +  ahora . getFul lYear( )) ; 

"El  mes:  "  +  ahora . getMonth( )) ; 

"El  día  de  la  semana:  "  +  ahora . getDay( )) ; 

"El  día  del  mes:  "  +  ahora . getDate( )) ; 

"====  HORA  ===="); 

"Horas:  "  +  ahora . getHours( )) ; 

"Minutos:  "  +  ahora . getMinutes( )) ; 

"Segundos:  "  +  ahora . getSeconds( )) ; 

"Mi  1 isegundos  desde  1/1/1970:  "+  ahora . getTime( )) ; 

"mi  1 isegundos :  "  +  ahora . getMi 1 1 iseconds( )) ; 

"====  OTROS  ===="); 

"Diferencia  horaria  respecto  a  UTC:  "  +  ahora . getTimezoneOf fset( )) ; 


Setters: 

Los  setters  en  el  caso  de  las  fechas  están  planteados  como  una  manera  de  ajustar  la  fecha  y 
la  hora  dentro  de  un  marco  determinado.  Veamos  en  el  siguiente  ejemplo: 


Dentro  del  marco 
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var  newYear  =  new  Date(Date . UTC(2016,  1,  1)); 
consolé . info( "La  fecha  es  "  +  newYear); 

newYear . setFul lYear(1980) ;  //  Pasamos  a  1980 

consolé . info( "La  fecha  es  "  +  newYear); 


newYear . setUTCMi 1 1 iseconds(1500) ;  //  i500ms  en  formato  UTC 

consolé . info( "La  fecha  es  "  +  newYear); 

Fuera  del  marco 

Debes  tener  en  cuenta  las  leyes  naturales:  un  día  tiene  24  horas,  un  mes  tiene  un 
máximo  de  31  días... 

Si  obviamos  esta  lógica,  JavaScript  improvisa  una  nueva  fecha,  pero  ésta  no  suele  ser 
correcta. 


newYear . setDate( 56) ;  //  Al  día  56  de  Enero 

consolé . info( "La  fecha  es  "  +  newYear); 


newYear . setUTCHours(36) ;  //  Pasamos  a  la  hora  36  del  día 

consolé . info( "La  fecha  es  "  +  newYear); 


newYear . setMonth( -6) ;  //  Retrocedemos  6  meses 

consolé . info( "La  fecha  es  "  +  newYear); 


Otros: 

•  .toString(),  .toDateStringO,  .toTimeStringO 

Devuelve  una  cadena  de  texto  con  la  fecha. 

1  var  ahora  =  new  Date(); 

2  ahora . toString( ) ;  //  Fecha  y  Hora 

ahora . toDateString( ) ;  //  Solo  Fecha 

4  ahora . toTimeString( ) ;  //  Solo  Hora 

•  .toUTCStringO,  .tolSOString(). 

Devuelve  una  cadena  con  la  fecha  en  formatos  específicos  UTC  e  ISO  8601. 

El  formato  ISO  8601  será  de  gran  ayuda  para  comunicarnos  con  otras  plataformas, 
librerías  y  sistemas,  por  tanto. . .  ¡aprende  como  funciona! 

1  var  ahora  =  new  Date(); 
ahora . toISOString( ) ; 
ahora  .  tollTCString( ) ; 

•  .toLocaleStrmgO 

Devuelve  una  cadena  con  la  fecha  en  versión  local.  Si  quieres  un  idioma/región  especí¬ 
fica  deberás  recurrir  a  la  Lista  de  códigos  IETF. 

También  permite  una  configuración  detallada. 
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1  var  ahora  =  new  Date(); 

consolé . info(ahora . toLocaleString( ) ) ; 

3 

4  //  Código  de  idioma  IETF  para  Alemán 

consolé . info(ahora . toLocaleString( "de -DE" ) ) ; 

6 

7  //  Opciones  Avanzadas  para  fechas 

8  var  opciones  =  { 

9  weekday :  ' long 1 , 

10  year :  'numeric1, 

11  month :  1 long 1 , 

12  day :  1 numeric 1 } ; 

consolé . log( ahora . toLocaleString( "de -DE" ,  opciones) ) ; 


Benchmark 

Ahora  que  ya  sabemos  manejar  el  tiempo,  fácilmente  podremos  hacer  pruebas  básicas  de 
rendimiento. 

Podremos  crear  una  primera  fecha  antes  de  ejecutar  cierto  código  y  otra  justo  al  final  del 
mismo  para  así  comparar  el  tiempo  transcurrido. 

Las  pruebas  de  rendimiento  (benchmarks),  pueden  serde  gran  ayuda  para  tomardecisiones 
importantes  a  la  hora  de  refactorizar  nuestro  código. 

1  var  inicio  =  new  Date(); 

2  //  Código  a  testear 

3  var  fin  =  new  Date(); 

4  var  transcurso  =  f in . getTime( )  -  inicio . getTime( ) ; 

5  consolé . info( "Pasaron  "+transcurso+"ms" ) ; 

Recuerda 

Se  pueden  realizar  pruebas  de  rendimiento  con  la  consola  del  navegador  ( conso - 
le.timeQ  y  console.timeEndf)),  como  vimos  en  el  capítulo  3. 


Setters,  problema  resuelto 

Usa  librerías 

Lidiar  con  fechas  es  una  tarea  compleja.  Si  vas  a  usar  librerías,  puedes  saltarte  el 
resto  del  capítulo  sin  ningún  problema. 
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Como  vimos  antes,  en  ocasiones  deseamos  poder  sumar  56  días  a  la  fecha  actual.  Si 
utilizamos  solamente  los  setters,  JavaScript  estimará  fechas  seguramente  erróneas.  Para 
asegurarnos  que  estamos  sumando  y  restando  las  cantidades  correctas,  lo  ideal  es  siempre 
incluir  el  getter  correspondiente  dentro  del  setter. 

Veamos  a  continuación  el  uso  de  getters  para  modificar  fechas  (días,  meses,  etc...). 

Nota:  Partiendo  del  ejemplo  de  MDN. 

Sin  getters 

var  theBigDay  =  new  Date(1962,  6,  7); 

theBigDay . toLocaleString( ) ;  //  6/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 
theBigDay . setDate(24) ; 

theBigDay. toLocaleString()  //  23/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 
theBigDay . setDate(32 ) ; 

theBigDay . toLocaleString( )  //  31/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 
theBigDay . setDate(22 ) ; 

theBigDay . toLocaleString( )  //  21/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 

theBigDay . setDate(22  +  32  +24); 

theBigDay . toLocaleString( )  //  15/9/1962  23:00:00 
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Con  getters 

var  theBigDay  =  new  Date(1962,  6,  7); 

theBigDay .  tol_ocaleString( ) ;  //  6/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 
theBigDay . setDate(theBigDay . getDate( )  +  24); 
theBigDay . toLocaleString( ) ;  //  30/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 
theBigDay . setDate(theBigDay . getDate( )  +  32); 
theBigDay . toLocaleString( ) ;  //  7/8/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 
theBigDay . setDate(theBigDay . getDate( )  +  22); 
theBigDay. toLocaleString();  //  28/7/1962  23:00:00 

var  theBigDay  =  new  Date(1962,  6,  7); 

theBigDay . setDate(theBigDay . getDate( )  +  22  +  32  +  24); 

theBigDay . toLocaleString( ) ;  //  22/9/1962  23:00:00 


Capítulo  7  -  Cadenas  de  texto 


O  Uno  de  los  grandes  cambios  que  llegaron  con  ECMA6  son  las  plantillas  de  cadenas 
de  texto.  Que  nos  permiten  almacenar  un  texto  con  espacios,  tabulaciones,  saltos  de 
líneas...  y  además  nos  aporta  postprocesado  e  interpolación  de  expresiones. 


Propiedades 

•  .length() 

Devuelve  la  longitud  de  la  cadena,  lo  que  resulta  muy  importante  ya  que  podremos 
utilizar  bucles  para  recorrer  cada  una  de  las  letras. . . 

1  var  cadena  =  "JavaScript,  ¡Inspírate!"; 

consolé. log( "JavaScript,  ¡Inspírate!  tiene  "  +  cadena . length  +  "  caracteres."); 
consolé . log( "Una  cadena  vacía  tiene  "  +  ''.length  +  "  caracteres."); 


Métodos 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .toLowerCase() 

Devuelve  todo  en  minúsculas. 

1  consolé . log( '  i  INSPÍRATE !'. toLowerCase( )) ; 

•  .toUpperCase() 

Devuelve  todo  en  mayúsculas. 

1  consolé . log( '  i  inspírate ! ' . toUpperCase( ) ) ; 
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•  .fromCharCodef) 

Devuelve  una  cadena  creada  mediante  una  secuencia  Unicode. 

consolé . info( "Es  el  año  2016  ("+  String . fromCharCode(8559, 8559, 8553, 8548, 8544)  \ 
2  +")"); 

•  .anchor() 

Crea  un  link interno  (ancla)  HTML. 

1  document . body . innerHTML  =  "Contenidos" . anchor ( "contenidos" ) ; 

2  //  "<a  name=" conten  i  dos" > Conten  idos </a>  " 

•  .charAtf) 

Devuelve  el  carácter  específico. 

1  var  cadena  =  "JavaScript,  ¡Inspírate!"; 

consolé . log( "El  carácter(posición)  3  es  +  cadena . charAt( 3)  + 

•  .charCodeAtf) 

Devuelve  el  valor  Unicode. 

1  var  cadena  =  "JavaScript,  i  Inspírate !" ; 

consolé . log( "El  carácter(posición)  3  es  +  cadena . charAt( 3)  +  en  Unicode  \ 

3  ( "+cadena . charCodeAt(3)+" ) " ) 

•  .concat() 

Combina  el  texto  de  dos  o  más  cadenas. 

1  var  cadenal  =  "Oh 

2  var  cadena2  =  "qué  maravillosa 
var  cadena3  =  "mañana1."; 

4  var  combinación  =  cadenal .concat(cadena2,cadena3) ; 

5  consolé . log(combinacion ) ;  //  devuelve  "Oh  qué  maravillosa  mañana'." 

•  .indexOf() 

Devuelve  la  posición  del  elemento  si  es  capaz  de  localizarlo  o  -1  en  caso  contrario. 

1  "Mundo  Web" . indexOf ( "Web" )  //  6 
"Mundo  Web" . indexOf ( "web" )  //  -1 

•  .lastlndexOf() 

Devuelve  la  ultima  localización  del  elemento  si  es  capaz  de  encontrarlo  o  -1  en  caso 
contrario. 

1  "JavaScript,  i  Inspírate !". lastlndex0f( "c" ) ;  //  16 
"JavaScript,  i  Inspírate !". lastlndex0f( "b" ) ;  //  -1 

•  Jink() 

Crea  un  enlace. 
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1  var  textoActivo=" JavaScript,  ¡Inspírate!" 

2  var  url="https : //leanpub . com/ javascr ipt- inspírate/" 

document . body . innerHTML  =  "Haga  click  para  volver  a  "  +  textoActi vo . 1 ink( ur 1 ) ; 

•  .trim() 

Elimina  espacios  vacíos  al  principio  y  al  final  de  la  cadena. 

1  consolé . log( 1  ¡inspírate!  '.trim());  //  i Inspírate ! 

•  .slice() 

Devuelve  una  cadena  nueva  con  una  sección  de  otra. 

1  var  cadena  =  "JavaScript,  ¡Inspírate!"; 

consolé . log(cadena . si ice(12 )) ;  //  i Inspírate ! 

consolé . log(cadena . si ice(0,  10));  //  JavaScript 

4  consolé . log(cadena . si ice(13,  -1));  //  Inspírate 

•  .split() 

Divide  una  cadena  usando  un  separadory  retorna  un  array. 

var  cadenaMeses  =  " Jan , Feb, Mar , Apr , May , Jun , Jul , Aug, Sep, Oct , Nov, Dec" ; 
var  meses  =  cadenaMeses . spl it( ",") ; 

consolé . log( "Los  meses  son  un  Array?",  Array . isArray(meses) ) 

•  .substrf) 

Devuelve  los  caracteres  de  una  cadena,  comenzando  en  la  localización  especificada,  y 
en  el  número  de  caracteres  especificado. 

1  var  cadena  =  "JavaScript,  ¡Inspírate!"; 

consolé . log( "cadena . substr(12,  12):",  cadena . substr (12 ,  12)); 
consolé . log( "cadena . substr(0, 10) ,  cadena . substr (0,  10)); 

•  .substringO 

Devuelve  un  subconjunto. 

1  var  cadena  =  "JavaScript,  ¡Inspírate!"; 

consolé . log( " (0, 5) :  "  +  cadena . substring(0, 10) ) ; 


O  Como  puedes  ver  existen  muchos  métodos  similares  para  retornar  partes  de  una  ca¬ 
dena.  Sin  embargo  cada  uno  tiene  matices  que  los  hacen  diferentes.  Te  recomiendo 
leer  Using  SliceQ,  SubstringO,  And  SubstrQ  in  JavaScript  de  Ben  Naden. 


Capítulo  8  -  Arrays 

Los  arrays  son  estructuras  que  nos  permiten  almacenar  muchos  datos,  sin  tener  que  preo¬ 
cuparnos  por  el  orden  o  la  organización  interna. 

Otra  forma  más  sencilla  de  entenderlo,  es  imaginar  que  un  array  es  sencillamente  como  una 
lista  de  la  compra. 

Partiendo  de  esta  analogía  será  sencillo  añadir  elementos  a  nuestra  lista: 


-  Tomates 

-  Café 

-  Brécol  i 

-  Cilantro 

-  Bombillas 


Como  el  orden  de  los  elementos  en  principio  nos  da  igual,  utilizaremos  un  marcador  numé¬ 
rico  para  referirnos  a  cada  elemento  de  la  lista,  lógicamente  empezaremos  por  el  cero,  ya 
que  somos  programadores. 

0  -  Tomates 

1  -  Café 

2  -  Brécol  i 

3  -  Cilantro 

4  -  Bombillas 

Cuando  añadimos  elementos  a  la  lista  el  orden  puede  alterarse  o  no,  en  función  de  si  se 
añadiran  antes  o  después  de  otros  elementos. 

0  -  Tomates 

1  -  Café 

2  -  Te  (Nuevo) 

3  -  Brócoli  (movido) 

4  -  Cilantro  (movido) 

5  -  Bombillas  (movido) 

6  -  Pen  Drive 


Capítulo  8 -Arrays 


71 


Cuando  eliminamos  elementos  también  alteramos  la  lista....  en  función  de  si  están  delante 
de  otros  elementos  o  no. 

0  -  Tomates 

1  -  café 

2  -  Te 

3  -  Brécol  i 

4  Cilantro  (Borrado) 

4  -  Bombillas  (movido) 

§ - Pen  Drive  (Borrado) 

Lógicamente  dentro  de  un  array  podremos  almacenar  todo  tipo  de  datos  (cadenas,  núme¬ 
ros,  objetos,  funciones... 

O  En  otros  lenguajes  de  programación  existen  más  estructuras  similares  a  estas  listas 
(arrays)  como  es  el  caso  de  las  tupias  en  Python. 


Manejo 

Creando  un  array 

Vacío: 


1  var  arreglo  =  [] ; 


Con  elementos: 


1  var  arreglo  =  [1,  "plátano",  "piscina",  "manzana",  true] ; 


Usando  el  índice 

1  var  arreglo  =  [1,  "plátano",  "piscina",  " 

2  consolé. log( "arreglojl] ,  arreglo[l]); 


manzana",  true]; 
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Cambiar  un  valor  del  índice 

1  var  arreglo  =  [1,  "plátano",  "piscina",  "manzana",  true] ; 

2  arreglo [0]  =  "fresa"; 

3  arreglo[4]  =  "pera"; 

4  arreglo [2]  =  "limón"; 

Borrando  elementos 

Sobreescribiendo  a  undefined 

En  ocasiones  solo  queremos  dejar  el  hueco  vacío  y  no  cambiar  el  orden  de  los  elementos  de 
un  array. 

En  estos  casos  lo  mejores  sustituir  el  valor  por  undefined  ya  sea  usando  delete  o  igualando. 

1  var  arreglo  =  [1,  "plátano"]; 

2  arreglo[0]  =  undefined; 

3  delete  arreglofl]; 


Borrando  el  elemento 

Al  eliminar  un  elemento  del  array  cambiamos  el  orden  dentro  del  array. 

1  var  arreglo  =  [1,  "plátano",  "manzana"]; 

2  arreglo . spl ice(l ,  1); 

3  consolé . log( arreglo [1 ] )  //  manzana 


Propiedades 

•  Aength 

Podremos  saber  cuantos  elementos  contiene  un  array. 

1  var  arreglo  =  [1,  "plátano",  "manzana"] 
arreglo . length ;  //  3 

Al  tener  este  dato  clave  podremos  hacer  bucles  que  realicen  sus  iteraciones  en  función 
de  la  cantidad  de  elementos. 

Presta  atención  al  uso  de  la  variable  i  en  el  interior  del  bucle  para  recorrer  el  array. 


Capítulo  8 -Arrays 


73 


1  var  números  =  [1,  2,  3,  4,  5]; 

for  (var  i  =  0;  i  <  números . length ;  i++)  { 
números [i]  *=  10; 

4  } 

O  Más  adelante  veremos  que  existen  estructuras  más  optimizadas  para  iterar  sobre  un 
array  como  map()  y  forEach(). 


Métodos 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .¡sArrayO 

Retorna  un  booleano  en  función  de  si  el  parámetro  es  un  array  o  no. 

1  var  arreglo  =  [1,2,3] 

2 

3  //  Estos  son  true 

4  Array . isArray( [1 ]) ; 

5  Array . isArray(arreglo) ; 

6 

7  //  Estos  son  false 

8  Array . isArray( ) ; 

Array . isArray( { } ) ; 

10  Array . isArray( nul 1 ) ; 

11  Array . isArray( undefined ) ; 

•  .sort() 

Permite  organizar  los  elementos  de  un  Array,  por  orden  alfabético  o  en  función  numé¬ 
rica  (ascendente). 

var  frutas  =  ['plátano',  'Naranja',  'Limón',  'Manzana',  'Mango']; 

frutas .  sort( ) ;  //  ["Limón",  "Mango",  "Manzana",  "Naranja",  "plátano"] 
var  números  =  [0,  45,  2,  -5,  123,  -47]; 

4  números .  sort( )  //  [-47,  -5,  0,  123,  2,  45] 

Aunque  en  ocasiones  el  ordenado  puede  no  funcionar  como  esperamos,  si  los  elemen¬ 
tos  que  componen  el  Array  son  de  una  naturaleza  distinta. 

1  var  miArray  =  ['uno',  2,  true,  'más  datos...']; 

miArray . sort( ) ;  //  [2,  "más  datos...",  true,  "uno"] 

•  .  rever se() 

Invierte  el  orden  de  un  array. 
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var  miArray  =  [ ' uno '  ,  2,  true,  ' más  datos 
miArray . reverse( ) ; 

consolé . log(miArray)  //  ["más  datos...",  true,  2,  "uno"] 

•  Join() 

Retorna  una  cadena  con  todos  los  elementos  de  array  dentro. 

1  var  array  =  ['datol',  2,  'masDatos']; 

var  datosJuntos  =  array . join( ) ;  //  ' datoi , 2 , masDatos  ' 

var  datosJuntos2  =  array . join( ' ') ;  //  ' dato!2masDatos  ' 

var  datosJuntos3  =  array. join( '  +  ');  //  'datol  +  2  +  masDatos' 

•  .toStringO 

Retorna  una  cadena  de  texto  con  todos  los  elementos. 

var  amigos  =  ['Luis',  'Carlos',  'Marco',  'Eduardo']; 
consolé . log( amigos . toString( ) ) ; 

•  .toLocaleStringO 

Retorna  como  strlng  (configuración  regional)  todos  los  elementos. 

1  var  numero  =  1337.89; 

2  var  fecha  =  new  Date(); 

var  miArray  =  [numero,  fecha,  'más  datos']; 

4 

var  arrayConvertida  =  miArray . toLocaleString( ) ; 

6  consolé . log(arrayConvertida) ; 

•  .concatf) 

Retorna  un  nuevo  array  con  los  arrays  especificados  concatenados. 

-  Dos  arrays: 

1  var  arreglo  =  ['a',  2,  true]; 

2  var  arreglo2  =  [1,  2,  4]; 

3 

var  nuevaArray  =  arreglo. concat(arreglo2); 

5 

6  consolé . log(nuevaArray) ; 
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-  Múltiples  arrays: 

1  var  arreglo  =  ['a',  2,  true] ; 

2  var  arreglo2  =  [1,  2,  4]; 

3  var  otroArreglo  =  ['abe',  1,  false] 

4 

var  nuevaArray  =  arreglo. concat(arreglo2 ,  [5.25,  100],  otroArreglo); 

6 

consolé . log(nuevaArray) ; 

•  .indexOf() 

Devuelve  la  posición  donde  se  encuentra  el  elemento  en  sí  ó  -1,  si  no  lo  encuentra. 

1  var  array  =  [2,  5,  9]; 

var  Índex  =  array . indexOf (9) ;  //  2 

var  índex  =  array . indexOf (12) ;  //  -i 

•  .lastldexOf() 

Devuelve  la  posición  del  último  elemento  en  sí  que  coincide  ó  -1,  si  no  lo  encuentra. 

1  var  array  =  [7,  1,  3,  7]; 
array . lastlndexOf ( 7) ;  //  3 
array . lastlndexOf (2) ;  //  -í 

•  .push() 

Añadir  nuevos  elementos  al  final  de  un  array. 

1  var  arreglo  =  [1,  "plátano",  "manzana"]; 
consolé . log( "Antes : " ,  arreglo . length ) ; 
arreglo . push( "nuevo" ) ; 

4  consolé . log( "Después ,  arreglo. length) ; 

5  consolé . log( "arreglo [4] ,  arreglo[4]); 

•  .unShiftf) 

Añade  nuevos  elementos  al  principio  del  array. 

1  var  miArray  =  [1,  2]; 

miArray . unshi ft(true,  "otros  datos..."); 

3  consolé . log( "Longitud  actual:",  miArray . length ) ; 

•  • popí) 

Eliminar  el  último  elemento  del  array. 

1  var  miArray  =  [1,  2]; 
arreglo . pop( ) ; 

3  consolé . log( "Longitud  actual:",  miArray . length ) ; 
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•  .shift() 

Eliminar  el  primer  elemento  del  array. 

1  arreglo . shi ft( ) ; 

•  .splice() 

Borrar  elementos  del  array,  alterando  con  ello  la  posición  de  los  demás. 

var  frutas  =  ['plátano',  'Naranja',  'Limón',  'Manzana',  'Mango']; 
consolé . log( " frutas [1 ]:" ,  frutas [1])  //  Naranja 
frutas . spl ice(l ,  3); 

4  consolé . log( " frutas [1 ]:" ,  frutas [1])  //  Mango 

5  consolé . info( " frutas . length ,  frutas . length ) ;  //  2 

Si  deseamos  conservar  en  un  variable  aquellos  elementos  que  hemos  eliminado,  es 
necesario  hacer  una  asignación  como  ésta: 

var  frutas  =  ['plátano',  'Naranja',  'Limón',  'Manzana',  'Mango']; 
var  cítricos  =  frutas . spl ice(l ,  2); 

3  consolé . info( "cítricos ,  cítricos); 

4  consolé . info( " frutas . length ,  frutas . length ) ; 


Métodos  Avanzados 


Algunos  de  los  métodos  más  utilizados,  requieren  comprenderen  profundidad  el  manejo  de 
funciones  y  en  especial  el  retorno. 

O  Como  aún  no  hemos  hablado  de  funciones  directamente,  nuestra  recomendación 
es  leer  por  encima  los  siguientes  métodos  y  su  funcionamiento...  para  regresar  más 
adelante  a  este  capítulo. 


•  .some() 

Verifica  si  alguno  de  los  elementos  del  array  pasan  la  prueba  implementada  por  la 
función  dada. 

1  function  tamañoVal ido(elemento,  indice,  arreglo)  { 

2  return  elemento  >=  10; 

3  } 

[12,  5,  8,  130,  44] . some( tamañoVal ido) ;  //  true 

[12,  54,  18,  130,  44] . some( tamañoVal ido) ;  //  true 

•  .every() 

Verifica  si  todos  los  elementos  del  array  pasan  la  prueba  implementada  por  la  función 
dada. 
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1  function  tamañoVal ido(elemento,  indice,  arreglo)  { 

return  elemento  >=  10; 

3  } 

4  [12,  5,  8,  130,  44] . every(tamañoVal ido) ;  //  false 

5  [12,  54,  18,  130,  44] . every( tamañoVal ido) ;  //  true 

•  .filterf) 

Crea  un  nuevo  array  con  aquellos  elementos  que  cumplan  la  condición. 

function  tamañoVal ido(elemento)  { 

2  return  elemento  >=  10; 

3  } 

var  filtrados  =  [true,  134,  10,  0,  nuil,  "Hola" ] . f i lter(tamañoVal ido) ; 

•  .forEach() 

Se  ejecuta  la  función  por  cada  elemento  del  array. 

1  function  logger(element,  Índex,  array)  { 

consolé . log( "array [ "  +  Índex  +"]="+  element); 

3  } 

4  [2,  5,  9] . forEach( logger ) ; 

•  .map() 

Itera  sobre  el  array  aplicando  una  transformación,  que  definimos  en  una  función  y 
finalmente  retorna  un  nuevo  array  con  todos  los  componentes  modificados. 

1  var  arreglo  =  ["plátano",  "fresa",  "lima",  "manzana"]; 

var  resultado  =  arreglo . map( function  (elemento) {return  elemento  +  "  modificado! \ 

3  "}); 

4  consolé . log(resultado) ; 


Arrays  multidimensionales 

No  dejéis  que  el  nombre  os  asuste,  sencillamente  cuando  tenemos  arrays  almacenadas  den¬ 
tro  de  otros  arrays,  entendemos  que  se  trabaja  sobre  Matrices  o  Arrays  multidimensionales. 
Es  sencillo: 

1  var  arreglol  =  ["plátano",  "fresa",  "lima",  "manzana"]; 

2  var  arreglo2  =  ["entrante",  "primero",  "segundo",  "postre"]; 

3 

4  var  juntandoArreglos  =  [arreglol,  arreglo2] ; 

5 

6  consolé . log( juntandoArreglos [0] [0] ) ;  //plátano 

7  consolé . log( juntandoArreglos [1 ] [3] ) ;  //postre 
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Objetos  Literales 


Junto  a  las  fundones,  de  las  cuales  hablaremos  en  el  próximo  capítulo,  los  objetos  son  la 
clave  para  dominar  el  JavaScript  de  hoy. 


Pero  antes  de  nada  aclaremos  un  concepto  básico: 

No  es  necesario  sab er programación  orientada  a  objetos,  para  trabajar  con  objetos. 


De  hecho  hasta  la  llegada  de  ECMAScript  6  no  había  algo  como  C/oss,  ya  que  en  JavaScript 
este  paradigma  se  hace  de  otra  forma,  gradas  a  Prototype. 


Pero...  ¡no  os  agobiéis!  consaberque  no  estamos  haciendo  Programación  Orientada 
a  Objetos  (POO)  nos  vale. 


Vamos  a  trabajar  con  Objetos  (Objetos  literales),  básicamente  son  como  arrays,  en  el  sentido 
que  son  una  variable  especial  que  nos  permite  almacenar  muchas  cosas  dentro  de  si  misma. 

A  diferencia  de  las  arrays,  aquí  las  cosas  tienen  nombre  (propiedades)  y  en  caso  de  almace¬ 
nar  una  función  dentro  del  objeto  recibirá  el  nombre  de  Método,  aunque  sea  exactamente 
igual  que  una  función  normal. 

La  forma  de  almacenar  datos  dentro  de  objetos,  tiene  mucha  relevancia,  y  por  eso  la  mayoría 
de  servicios  web  basados  en  API  REST,  dan  soporte  al  formato  de  intercambio  de  datos  JSON 
(JavaScript  Object  Notation). 

JSON  básicamente  es  un  objeto  de  los  que  veremos  a  continuación,  pero  que  fue  serializado 
de  tal  forma  que  es  una  cadena  de  texto,  que  puede  ser  parseada  de  vuelta.  Esta  forma  de 
trabajar  es  claramente  más  fácil  que  el  clásico  y  obsoleto  XML,  para  el  intercambio  de  datos 
cliente-servidor  en  el  contexto  del  desarrollo  web. 
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Manejo 

•  Creando  un  objeto 

Vacío: 

1  var  miObjeto  =  {}; 

Con  propiedades: 

1  var  miObjeto  =  { 

2  cadena :  ' esto  es  una  cadena  '  , 

numero:  2, 

4  booleano:  false 

5  }; 

Con  Métodos: 

1  var  miObjeto  =  { 

saludar:  function(){ 

3  consolé . log( "hola !") ; 

4  } 

5  }; 

•  Usando  las  propiedades  y  métodos 

1  var  miObjeto  =  { 

método:  function()  { 

consolé . log(miObjeto . propiedadl ) 

4  }, 

5  propiedadl :  "Datos" 

6  }; 

7 

8  //  Recuperando  el  valor  de  propiedadl 

consolé . log( "miObjeto . propiedadl : " ,  miObjeto . propiedadl ) ; 

10 

11  //  Ejecutando  el  método 

12  miObjeto . método ( ) 
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•  Cambiar  un  valor  de  una  propiedad 

1  var  miObjeto  =  { 

propiedadl :  "Datos" 

3  }; 

4 

5  miObjeto . propiedadl  =  123456789; 

6 

7  consolé . Iog(mi0bjeto . propiedadl ) ; 

•  Borrando  elementos 

Utilizaremos  el  controvertido  operador  delete.  Te  recomiendo  esta  lectura,  para  mejo¬ 
rar  tu  comprensión  acerca  de  este  operador. 

1  var  miObjeto  =  { 

2  propiedadl:  "Datos", 
bórrame:  "Quiero  ser  borrado" 

4  }; 

5 

6  consolé . Iog(mi0bjeto . bórrame) ; 

7 

8  delete  miObjeto . bórrame; 

9 

10  consolé . Iog(mi0bjeto . bórrame) ; 


Métodos 


Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .definePropertiesf) 

Define  nuevas  propiedades  o  modifica  las  existentes  directamente  en  el  objeto,  retor¬ 
nando  el  objeto  modificado. 

O  Realmente  nos  permite  llevar  nuestros  objetos  mucho  más  allá.  No  obstante  trans¬ 
ciende  de  nuestros  objetivos,  pero  es  un  buen  punto  de  partida. 


Más  información... 
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1  var  miObjeto  =  {propiedad  "Propiedad  original..."} 

Object . def ineProperties(miObjeto,  { 

3  "propiedadl " :  { 

4  writable:  true, 

5  valué:  "Propiedadl  original..." 

6  }, 

7  "propiedad2" :  { 

8  valué:  "Cadena  de  texto", 

9  writable:  false 

10  } 

}); 

12  consolé . info(miObjeto) ; 

13  miObjeto . propiedadl  =  "Propiedadl  original  Modificada"; 

14  consolé . info(miObjeto . propiedadl ) ; 

15  miObjeto . propiedad2  =  "Cadena  de  texto...  ¿modificada?"; 

16  consolé . info(miObjeto . propiedad2 ) ; 

•  .getOwnPropertyDescriptor() 

Devuelve  los  detalles  de  las  propiedades  y  métodos  del  objeto.  En  caso  de  no  existir 
retornará  undefined. 

1  var  miObjeto  =  { 

2  método:  function()  { 

consolé . log(miObjeto . propiedadl ) 

4  }, 

5  propiedadl :  "Datos" 

6  }; 

7 

consolé . info(Object . getOwnPropertyDescriptor(miObjeto,  1 propiedadl ' ) ) ; 

9  //  {valué:  "Datos",  writable:  true,  enumerable:  true,  con  figurable :  true} 

10 

consolé . info(Object . getOwnPropertyDescriptor(miObjeto,  1  inventado ' ) ) ; 

12  //  undefined 

•  .getOwnPropertyNames() 

Devuelve  un  array  con  todos  los  nombres  de  las  propiedades  y  métodos  del  objeto. 

1  var  miObjeto  =  { 

método:  function()  { 

consolé . log(miObjeto . propiedadl ) 

4  }, 

5  propiedadl :  "Datos" 

6  }; 

7 

consolé . log(Object . getOwnPropertyNames(miObjeto) ) ; 

9  //  ["método",  "propiedadl"] 
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•  .isExtensiblef) 

Determina  si  un  objeto  es  extensible,  es  decir  que  se  puedan  agregar  nuevas  propieda¬ 
des  al  mismo. 

1  var  miObjeto  =  { 

2  método:  function()  { 

consolé . log(miObjeto . propiedadl ) 

4  }, 

5  propiedadl :  "Datos" 

6  }; 

7 

consolé . log( " ¿Se  puede  extender?",  Object . isExtensible(miObjeto) ) ; 

9 

10  var  sellado  =  Object . seal (miObjeto) ; 

consolé . log( " ¿Se  puede  extender?",  Object . isExtensible(sel lado) ) ; 

12 

13  var  congelado  =  Object . freeze(miObjeto) ; 

consolé . log( " ¿Se  puede  extender?",  Object . isExtensible(congelado) ) ; 

15 

16  Object . preventExtensions(miObjeto) ; 

consolé . log( " ¿Se  puede  extender?",  Object . isExtensible(miObjeto) ) ; 

•  .hasOwnPropertyf) 

Devuelve  true  o  false  si  la  propiedad  existe  o  no. 

1  var  miObjeto  =  { 

2  método:  function()  { 

consolé . log(miObjeto . propiedadl ) 

4  }, 

5  propiedadl :  "Datos" 

6  }; 

7 

consolé . log( " ¿Tiene  la  propiedad  Y'propiedadl \" ?" ,  miObjeto . hasOwnProperty ( ' pro\ 
9  piedadl 1 ) ) ; 

consolé . log( " ¿Tiene  la  propiedad  \"propiedad2\" ?" ,  miObjeto . hasOwnProperty (' pro\ 

11  piedad2 1 ) ) ; 
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•  .propertylsEnumerableO 

Devuelve  true  o  false,  si  la  propiedad  especificada  es  enumerable,  y  con  ello  sabemos 
si  será  incluida  en  la  iteración  de  un  bucle  For...  In. 

1  var  miObjeto  =  { 

2  método:  function()  { 

consolé . log(miObjeto . propiedadl ) 

4  }, 

5  propiedadl :  "Datos" 

6  }; 

7 

consolé . log( " ¿Es  enumerable  Y'propiedadl \" ?" ,  miObjeto . propertyIsEnumerable( ' pr\ 
9  opiedadl ' ) ) ; 

consolé . log( " ¿Es  enumerable  \"metodo\" ?" ,  miObjeto . property IsEnumerable( ' propie\ 
11  dad2 ' ) ) ; 

•  .toLocaleStríngO 

Retorna  como  string  (configuración  regional)  todas  las  propiedades. 

1  var  fecha  =  new  Date(); 

2 

var  miObjeto  =  { 

4  método:  function()  { 

5  consolé . log(miObjeto . propiedadl ) 

6  }, 

propiedadl:  "Datos", 

8  fecha:  fecha 

9  }; 

10 

11  miObjeto . toLocaleString( ) 

12  consolé . log( "La  fecha  es  ",  miObjeto . fecha ) ; 


Métodos  Avanzados 


Algunos  de  los  métodos  más  utilizados  requieren  comprenderen  profundidad  el  manejo  de 
funciones  y  en  especial  el  retorno. 

O  Como  aún  no  hemos  hablado  de  funciones,  mi  recomendación  es  leer  por  encima 
los  siguientes  métodos  y  su  funcionamiento...  para  retornar  más  adelante  a  este 
capítulo. 
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•  For...  in 

Itera  sobre  todas  las  propiedades  de  un  objeto,  en  un  orden  arbitrario. 

1  var  objetol  =  { 

propiedadl :  "hola", 
propiedad2;  2, 

4  propiedad3:  false, 

5  propiedad4:  [true,2,5, 
propiedad5:  { 

dato:  "más  datos. . . " 

8  }, 

método:  function(){ 

10  consolé . log( "hola" ) ; 

11  } 

12  } 

13 

14  function  mostrar_propiedades(objeto,  nombreObjeto)  { 

15  var  resultado  = 

16  for  (var  i  in  objeto)  { 

resultado  +=  nombreObjeto  +  +  i  +  "  =  "  +  objetoji]  +  "\n"; 

18  } 

19  return  resultado; 

20  } 

21 

22  mostrar_prop i edades ( obj etol ,  "objetol"); 

Usos  Especíales 

Trabajando  con  espacios  y  caracteres  especiales 

1 

2 

3 

4 

5 

6 

7 

8 
9 


var  miObjeto  =  { 

nombre:  "objeto", 

"año":  2015, 

"estado  del  sistema":  "correcto" 

}; 

consolé . log(miObjeto [ "año" ]  ) ; 

miObjeto [ "estado  del  sistema"]  =  "fuera  de  servicio"; 
consolé . log(miObjeto [ "estado  del  sistema"]); 
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Acortar  objetos 

En  ocasiones,  especialmente  al  parsear  datos  de  internet  en  formato  JSON,  los  objetos 
pueden  estar  muy  anidados...  dificultando  enormemente  el  manejo.  Por  eso  podremos 
considerar  una  buena  práctica,  acortarlos  con  nuevas  variables  o  sobreescribir  al  propio 
objeto  con  aquellos  datos  relevantes: 


1  var  objetoAbreviado  =  objeto . muy . largo [ "métodos  y  propiedades"]; 

2 

3  objetoAbreviado . propiedadl ; 


Estructuras  de  datos 


Un  buen  manejo  de  objetos,  nos  dará  las  claves  para  poder  tener  una  estructura  de  datos 
eficiente  en  nuestra  aplicación  y  en  las  comunicaciones  cliente-servidor. 

O  Los  objetos,  sientan  las  bases  sobre  las  que  luego  almacenaremos  mucha  más 
información,  en  el  capítulo  12,  veremos  mucho  más  sobre  esto. 


Capítulo  10  -  Funciones 

Las  fundones  de  JavaScript  son  el  alma  de  este  lenguaje,  por  eso  se  consideran  ciudadanos 
de  primera  clase  (first-class  Citizen),  además  de  entidades  de  orden  superior. 

En  JavaScript,  las  funciones  tienen  “super poderes”.  Estos  son  algunos  de  los  más  importan¬ 
tes: 


•  Ser  pasadas  como  parámetros  (callbacks). 

•  Ser  parte  de  los  objetos  como  métodos. 

•  Ser  asignadas  a  una  variable  (función  anónima). 

•  Ser  retornadas  por  otra  función. 

Una  de  las  claves  para  entender  la  importancia  de  las  funciones,  aún  cuando  estamos  dando 
nuestros  primeros  pasos  en  JavaScript  es  la  reusabilidad.  Podemos  crear  partes  de  código 
que  fácilmente  podremos  reutilizar  a  lo  largo  de  una  aplicación  o  incluso  a  lo  largo  de 
muchos  programas  y  aplicaciones...  llegando  incluso  a  crear  nuestras  propias  librerías. 

Pero  para  dominar  la  reusabilidad  y  respetarcon  profundidad  el  principio  de  programación 
DRY (Don’t  Repeat  Yourself),  deberemos  en  cualquier  caso  ser  capaces  de  manejar  los  pará¬ 
metros  y  el  retorno  de  las  funciones,  algo  de  lo  que  hablaremos  mucho  en  este  capítulo. 

Las  funciones,  especialmente  como  parámetro  (callback),  también  será  nuestra  puerta  de 
entrada  al  maravilloso,  caótico  y  paradigmático  mundo  de  la  asincronía. 


Manejo 

•  Declarar  funciones 

Como  sentencia: 


function  miFuncion  (){ 

consolé . log( "Hola ! " ) 

3  } 

Como  valor  de  una  variable: 


var  miFuncion  =  function(){ 
consolé . log( "Hola ! " ) 

3  } 
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Como  método  en  un  objeto: 

1  var  miObjeto  =  { 

2  propiedad:  "Soy  una  propiedad", 

3  método:  function(){ 

4  consolé . log( "Hola !" ) 

5  } 

6  } 

•  Ejecutar  funciones 

Aunque  pueda  parecer  algo  extraño,  desde  el  principio,  ya  estábamos  ejecutando 
funciones. 

1  //  Recuerdas  isNaN? 

consolé . log( "Recuerdas  isNaN?",  isNaN(NaN)) 

Ahora  ejecutamos  nuestras  propias  funciones  y  métodos. 

1  var  miFuncion  =  function(){ 

consolé . log( "Hola ! "  ) ; 

3  } 

4 

5  function  otraFunción( )  { 

6  consolé . log( "Hola  de  nuevo!"); 

7  } 

8 

var  obj  =  { 

10  método:  function  ()  { 

11  consolé . log( "Hola .. .  ahora  como  método!"); 

12  } 

13  } 

14 

15  miFuncion(); 

16  otraFunción( ) ; 

17  obj . metodo( ) ; 

Argumentos  y  parámetros 

Cuando  queremos  hacerfunciones  con  un  nivel  de  abstracción  realmente  alto,  tenemos  que 
recurrir  al  aislamiento.  De  tal  forma  que  nuestra  función  no  dependa  de  ciertas  variables  o 
datos  externos  a  ella. 

Cuando  definimos  (creamos)  una  función,  podemos  incluir  ciertos  parámetros  entre  los 
paréntesis  que  actuarán  como  referencias.  Funcionarán  internamente  igual  que  variables, 
de  tal  forma  que  a  la  hora  de  ejecutar  la  función...  podremos  pasarle  ciertos  argumentos  y 
así  tener  funciones  con  un  mayor  nivel  de  abstracción. 
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Uso  Normal 

//  Declarando  Parámetros 

function  sumar  (pl,  p2){ 

consolé . log( "suma ,  pl  +  p2) 

} 

//  Pasando  Argumentos 
sumar(2,  3); 

El  exceso  de  argumentos  no  es  un  problema. 


//  Declarando  Parámetros 

function  sumar  (pl,  p2){ 

consolé . log( "suma ,  pl  +  p2) 

} 

//  Pasando  Argumentos 

sumar(2,  3,  "más  datos...",  45,  true); 

La  falta  de  argumento  crea  un  valor  Indefinido. 

function  testeando  (pl,  p2){ 

consolé . log( "pl ,  pl ) ; 
consolé . log( "p2 ,  p2) 

} 

//  Pasando  Argumentos 
testeando(2) ; 

Parámetros  opcionales 

Podremos  simplificar  enormemente  la  ejecución  de  las  funciones  si,  definimos  ciertos 
valores  por  defecto  para  aquellos  parámetros  que  consideremos  opcionales. 

Este  trabajo  adicional  por  nuestra  parte,  se  verá  recompensado  posteriormente  en  tareas  de 
soporte  y  documentación  que  no  tendremos  que  realizar. 

Trabajar  con  valores  por  defecto  nos  ayudará  mucho  para  construir  librerías  y  un  código 
modular  eficiente. 


Básicamente  existen  dos  maneras  de  hacer  esto. 
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•  Utilizando  el  operador  ¡| 

function  userID(nombre,  numero)  { 

2  numero  =  numero  | |  "000000E"; 

consolé . log( " ID ,  nombre  +  +  numero) 

4  } 

5 

6  user ID( "U1 ises" ,  31);  //  Ulises-3i 

user ID( "Oscar" ) ;  //  Oscar-000000E 

user ID( "Pepe" ,  0)  //  Pepe-000000E 

Aunque  este  operador  hace  un  buen  trabajo  se  equivoca  con  el  0  -entre  otros-  por 
eso  no  es  recomendable  utilizarlo,  especialmente  cuando  se  encarga  de  gestionar  el 
parámetro  por  defecto  de  valores  numéricos. 

•  Utilizando  un  ¡f 

Podemos  hacer  una  validación  por  tipo,  lo  que  descartará  ciertos  falsos  positivos  como 
en  el  caso  del  0. 

function  sumar(a,  b)  { 

if(typeof  b  ===  ' undef ined ' ) { 
b  =  0; 

4  } 

5 

6  return  a+b; 

7  } 

8 

sumar (2) ;  //  2 

10  sumar(2,  8);  //  10 

Con  un  operador  ternario  se  hace  más  compacto  pero  menos  legible: 

1  function  sumar(a,  b)  { 

b  =  typeof  b  !==  'undef ined1  ?  b  :  0; 

3  return  a+b; 

4  } 

5 

6  sumar (2) ;  //  2 

7  sumar(2,  8);  //  10 
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El  orden  es  clave 

El  orden  de  los  parámetros  es  muy  importante,  ya  que  su  posición  puede  alterar  enorme¬ 
mente  la  usabilidad  a  la  hora  de  la  ejecución,  por  eso  el  orden  siempre  será: 

•  Parámetros  fijos  (primero). 

•  Parámetros  opcionales  (después). 

Objetos  como  argumento 

Se  considera  una  buena  práctica,  pasar  un  único  objeto  como  parámetro  si  estamos  mane¬ 
jando  más  de  tres  parámetros  fijos. 

De  esta  forma  además  de  agrupar  todo  fácilmente,  también  podemos  cambiar  el  orden  de 
entrada  de  datos. 

Es  importante  recordar  que  debemos  documentar  muy  bien  lo  que  esperamos,  que  con¬ 
tenga  el  objeto,  de  lo  contrario  nuestros  métodos  y  funciones  pueden  ser  un  infierno  para 
cualquier  otro  programador  e  incluso  para  nosotros  mismos  pasado  un  tiempo. 

contactos  =  []; 


function  crearContacto  (nombre,  usuar ioTwitter , 
contactos . push( { 

"nombre" :  nombre, 

"§"  +  twitter 


}) 


} 


referencias, 


notas, 


fotoUr 1 ) { 


crearContacto( "Oscar " ,  "inventado",  "amigos...", 


"etc. 


"más  cosas ..."); 


¡Refactorizemos! 

contactos  =  []; 

function  crearContacto  (datos) { 
contactos . push( { 

"nombre":  datos . nombre, 

+  datos. twitter 

}) 

} 

//  Puedo  pasar  los  atributos  en  el  orden  que  quiera 

crearContacto( {twitter :  "inventado",  nombre:  "Pepe",  fotoUrl :  "http..."}); 
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Avanzado:  Objeto  arguments 

El  Objeto  Arguments  no  es  un  array,  solo  es  similar. 


function  pruebaArgumentos  ( )  { 
consolé . log(arguments) ; 
consolé . info(arguments [0] ) ; 
consolé . info(arguments [1 ]  ) ; 

} 

pruebaArgumentos  (1,  "vale",  true); 


Conversión  array  requiere  de  ciertos  conocimientos  avanzados  en  el  uso  deproíoíy- 
peythis.  Os  dejo  una  función  que  os  ayudará  a  realizar  esta  conversión  de  una  forma 
fácil. 


1  function  conversorArgumentos(arguments)  { 

var  argumentos  =  Array . prototype . si  ice . cal  1 (arguments) ; 
return  argumentos . sort( ) ; 

4  } 


Retorno 


Otro  de  los  puntos  fuertes  a  la  hora  de  plantear  estructuras  de  código  modulares  y  reutiliza- 
bles,  es  tener  en  cuenta  el  retorno. 

El  retorno  nos  permite  devolver  un  valor  al  terminar  de  ejecutarse  la  función.  Este  valor 
puede  ser  cualquier  tipo  de  dato  de  los  muchos  que  tenemos  en  JavaScript.  Por  supuesto, 
también  funciones  y  objetos. 

Cómo  utilizar  funciones  que  retornen  valores  en  función  de  ciertas  operaciones  realizadas. 

function  val idarPar (numero) { 

var  esPar  =  numero  %  2  ! ==  1 ; 
var  mensaje; 


if  (esPar)  { 

mensaje  =  "Bravo!  es  un  número  par!"; 

}  else  { 

mensaje  =  "ERROR!  No  es  un  número  par.  .  .  . 

} 

return  mensaje; 
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}; 


consolé . log( "El  5  es  un  número  par?",  val idarPar(5) ) ; 
consolé . log( "El  2  es  un  número  par?",  val idarPar(2) ) ; 

Una  suma  de  cuadrados  en  el  retorno.  Las  operaciones  también  pueden  ser  realizadas  en  el 
retorno  de  la  función. 

function  sumaCuadrados  (a,  b)  { 
return  (a*a)  +  (b*b); 

}; 


var  resultado  =  sumaCuadrados(2,  3); 
consolé . log( "2x2  +  3x3  =",  resultado) 


Anidación 

Dentro  de  una  función,  podemos  crear  nuevas  funciones  al  igual  que  variables  de  todo  tipo. 
Este  es  un  recurso  a  tener  en  cuenta,  pero  no  debemos  abusar  de  la  anidación...  ya  que,  el 
código  puede  volverse  muy  difícil  de  leer  y  depurar. 


function  saludar(quien){ 

function  alertaSaludo( ) { 

consolé . log( "hola  "  +  quien); 

} 

return  alertaSaludo; 

} 

var  saluda  =  saludar( "Amigo/a" ) ; 
saluda( ) ; 

También  podemos  usar  parámetros,  al  igual  que  una  función  normal. 


function  saludar(quien){ 

function  alertaSaludo( ) { 

consolé . log( "hola  "  +  quien); 

} 

return  alertaSaludo; 

} 


saludar( "Amigo/a" ) ( ) ; 
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Ámbito  (Scope) 

Por  defecto  en  JavaScript  existen  dos  tipos  de  ámbitos,  local  y  global.  Dominar  los  ámbitos 
nos  hará  llegar  a  ser  grandes  artesanos,  pero  no  es  una  tarea  sencilla. 

En  principio  aquellas  variables  que  se  han  declarado  fuera  de  la  función,  son  de  ámbito 
global,  y  las  variables  que  se  declaran  en  el  interior  serán  consideradas  de  ámbito  local. 

Desde  cualquier  función  siempre  podremos  acceder  a  todas  las  variables  que  se  han  de¬ 
clarado  en  el  ámbito  global,  pero  desde  el  exterior  de  una  función  no  podremos  acceder 
a  su  ámbito  local.  Para  poder  solventar  esta  limitación  se  utilizan  los  retornos  que  vimos 
anteriormente  y  algunos  recursos  adicionales  que  veremos  más  adelante. 


var  ambitoGlobal  =  "Soy  una  variable  Global!"; 

function  miFuncion  ()  { 

var  ambitoLocal  =  "Soy  una  variable  Local!"; 

consolé . log( "Desde  -local-  puedo  ver  ambitoLocal?",  ambitoLocal); 
consolé . log( "Desde  -local-  puedo  ver  ambitoGlobal?",  ambitoGlobal); 

} 

consolé . log( "Desde  -global-  puedo  ver  ambitoLocal?",  ambitoLocal); 
//Uncaught  ReferenceError:  ambitoLocal  is  no t  defined(...) 

consolé . log( "Desde  -global-  puedo  ver  ambitoGlobal?",  ambitoGlobal); 


Este  juego  de  ámbito  local  y  global,  puede  extenderse  en  el  entorno  compartido  y  aislado  de 
las  funciones  anidadas. 


Duplicando  Variables 

Una  mala  práctica  a  la  hora  de  planificar  nombres  de  las  variables  en  nuestra 
aplicación  puede  llevarnos  a  la  situación  en  la  que  tengamos  variables  creadas 
(declaradas)  en  el  ámbito  global  y  en  el  local  con  los  mismos  nombres. 


Esto  puede  ser  evitado  desde  la  planificación  en  una  fase  temprana  o  posterior  con 
algún  linter  como  JSHint  o  ESLint. 


Funciones  Anónimas 


En  JavaScript  podemos  crear  tantas  funciones  como  queramos,  sin  embargo  entre  los 
requisitos  de  creación  no  está  incluir  un  nombre  necesariamente. 
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Funciones  que  retornan  funciones 

Cuando  una  fundón  retorna  una  nueva  función,  esta  nueva  función  lógicamente  será  anó¬ 
nima. 


function  saludo(quien){ 
return  function(){ 

consolé . log( "hola  "  +  quien); 

} 

} 

var  saluda  =  saludo( "Amigo/a" ) ; 
saluda( ) ; 

Podemos  ejecutar  ambas  funciones,  sin  asignar  una  variable  necesariamente. 

function  saludo(quien){ 
return  function(){ 

consolé . log( "hola  "  +  quien); 

} 

} 

saludo( "Amigo/a" ) ( ) ; 


Funciones  anónimas  autoejecutadas 

O  Es  uno  de  los  patrones  más  clásicos  y  utilizados  en  JavaScript,  para  encapsular 
nuestro  código  y  prevenir  que  pueda  ser  alterado  desde  el  exterior. 

Esta  técnica  da  mucho  juego,  si  tenemos  en  cuenta  que  podemos  usar  el  retorno. 

Al  aislar  nuestro  código  tanto  del  exterior,  podemos  pensar  que  nuestro  programa  se  queda 
lejos  de  ser  capaz  de  interactuar  con  el  usuario,  pero  esto  es  incorrecto,  ya  que  en  JavaScript 
podremos  recurrirá  la  programación  dirigida  por  eventos.  Hablaremos  en  próximos  capítu¬ 
los  sobre  ello. 

(function()  { 

consolé . log( "hola  Amigo/a") 

})(); 

Resulta  más  sencillo  de  entender  esta  estructura  si  entendemos  el  juego  de  los  paréntesis. 
Declaramos  una  función: 
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(//código) () 


Lo  contenido  en  el  primer  paréntesis  contiene  el  código  encapsulado,  al  igual  que  hacíamos 
con  las  operaciones  matemáticas  en  capítulos  anteriores. 

El  segundo  paréntesis  es  el  encargado  de  ejecutar  el  bloque  de  código  anterior,  asi  es  como 
logramos  que  la  función  sea  inmediatamente  ejecutada  dentro  de  un  ámbito  al  que  no 
podremos  acceder. 

Como  podemos  ver,  la  estructura  básica  sería  algo  así: 


1  ( function( ){})(); 

Aunque  existen  bastantes  variantes  y  debates: 

1  ( function( ){}()); 

2  ! function( ){}( ) ; 

3  +function( ){}( ) ; 

4  ! l%-+~function( ) { } ( ) ; 

5  //. . . 

Al  igual  que  el  resto  de  funciones  podemos  hacer  uso  de  los  parámetros. 

1  (  function(quien ) { 

2  consolé . log( "hola  "  +  quien); 

3  })( "Amigo/a"); 


Objeto  Window  como  parámetro 

Aunque  por  temas  de  rendimiento  -lo  más  habitual-  es  pasar  como  argumento  el 
objeto  window,  así  disponemos  de  una  copia  dentro  del  propio  ámbito  de  la  función. 


1  ( function(window) { 

2  //  código 

3  }) (window); 


Recursíón 


Otra  manera  más  funcional  y  divertida  de  hacer  bucles  es  utilizando  la  recursión.  Básicamen¬ 
te  una  función  es  capaz  de  llamarse  a  sí  misma  durante  su  ejecución,  lo  que  resulta  ser  una 
funcionalidad  muy  atractiva  para  ciertas  operaciones. 

A  Por  otro  lado,  aunque  es  una  práctica  muy  habitual  entre  los  programadores  -que 
defienden-  la  programación  funcional  en  JavaScript,  puede  ser  complicado  prevenir 
el  riesgo  de  caer  en  bucles  infinitos. 
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Un  clásico  donde  podemos  aplicar  recursividad  es  en  el  cálculo  del  factorial. 


function  factorial (n ) { 
if(n  <=  1 ) { 
return  1 
}  else  { 

return  n  *  factor ial ( n-1 ) 

} 

} 


factorial (0) ; 
factorial (1 ) ; 
factorial (2) ; 
factorial (3) ; 
factorial (4) ; 
factorial (5) ; 
factorial (6) ; 


//  n!  =  1 
//  n!  =  1 
//  ni  =  2 
//  n!  =6  (3*2*i ) 

//  n!  =  24  (4*3*2*i ) 

//  n!  =  Í20  (5*4*3*2*i) 
//  n!  =  720  (. . .) 


Callbacks 


La  primera  curiosidad  sobre  los  callbacks: 

Es  una  técnica  de  programación  y  no  una  facilidad  del  lenguaje,  por  ello  callback  no 
es  una  palabra  reservada  en  JavaScript,  y  puedes  usarla  en  tu  código,  si  te  resulta 
más  legible. 


Callbacks  en  Wikiwand: 

“En  programación  de  computadoras,  una  devolución  de  llamada  o  retrollamada  (en 
inglés:  callback)  es  una  función  “A”  que  se  usa  como  argumento  de  otra  función  “B”. 
Cuando  se  llama  a  “B"  ésta  ejecuta  “A”.  Para  conseguirlo,  usualmente  lo  que  se  pasa 
a  “B”  es  el  puntero  a  “A”.” 


Esto  quiere  decir,  que  cuando  cierta  función  termina  de  realizar  todo  lo  que  tiene  que 
hacer,  ejecutará  una  función  que  le  fue  pasada  como  argumento. 

En  un  principio,  este  concepto  parece  complicado,  y  sin  duda  lo  es,  pero  este  sistema  es 
el  primer  paso  para  manejar  la  asincronía.  Esto  sucederá  cuando  nuestro  código  deja  de 
ejecutarse  de  manera  estructurada  línea  a  línea,  por  ejemplo  con  las  peticiones  AJAX,  lo  que 
veremos  en  próximos  capítulos. 

Comparando  por  contexto 

Cuando  tenemos  un  código  síncrono,  fácilmente  podemos  obviar  el  uso  de  callbacks,  y  llegar 
al  mismo  resultado,  ya  que  nuestro  código  sigue  un  orden  lógico. 
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Sin  Callbacks: 


function  primerPaso()  { 

consolé . log( "Este  es  el  primer  paso"); 

}; 

function  segundoPaso( )  { 

consolé . log( "Este  es  el  segundo  paso"); 

}; 


pr imerPaso( ) ; 
segundoPaso( ) ; 

Con  Callbacks: 


function  primerPaso(callback)  { 

consolé . log( "Este  es  el  primer  paso"); 
cal lback( ) ; 

}; 


function  segundoPaso( )  { 

consolé . log( "Este  es  el  segundo  paso"); 


}; 


primerPaso(segundoPaso) ; 

Cuando  nuestro  código  se  ejecute  de  forma  asincrona,  la  única  forma  de  conservar  el 
flujo  en  orden,  será  utilizando  entre  otras  cosas  Callabcks  o  Promesas,  como  veremos  a 
continuación. 

O  Si  has  desarrollado  alguna  vez  con  JQuery,  habrás  notado  que  tiene  unas  caracte¬ 
rísticas  ligeramente  diferentes  al  JavaScript  al  que  estamos  acostumbrados. 

1  $( ' ^elemento ' ) . fadeln( ' slow ' ,  function( )  { 

2  //  código  del  callback 

3  }); 


Como  puedes  ver...  en  muchos  métodos,  pasamos  como  argumento  una  función 
que  declaramos  en  línea.  Básicamente...  ¡ya  estábamos  usando  callabacks!  pero 
no  eramos  conscientes. 
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Veamos  un  ejemplo,  un  poco  condensado.  Os  ayudaré  comentando  el  código: 

/* 

Declaramos  una  función  que  espera  dos  parámetros 

-  parametro 

-  callback 

*/ 

var  quieroCal lback  =  function(pl ,  callback){ 

//  Consideramos  el  callback  como  algo  opcional . 
if  (callback){ 

//  Validamos  si  es  una  función  o  no. 
if  (typeof  callback  ===  ’function’){ 

/* 

De  ser  una  función  lo  ejecutamos  y 
y  pasamos  como  argumento  "pl " 

V 

cal lback(pl ) ; 

}  else  { 

/* 

Si  no  se  trata  de  una  función. . . 
simplemente  mostramos  ambos  datos. 

*/ 

consolé . log(pl ,  callback); 

} 

} 

} 

quieroCal lback ( ' a  1 ,  ' b ' ) ; 

quieroCal lback( ’ a  1 ,  function  (val ) { 
consolé . log(val ) ; 

}); 


Asincronía 


La  naturaleza  de  la  Asincronía 

Hasta  ahora  todo  el  código  que  vimos  se  ejecutaba  de  una  manera  lógica,  previsible 
y  secuencial.  Cada  línea  de  código  era  ejecutada  después  de  la  anterior,  tardará  lo 
que  tardará.  Este  estilo  de  programación  es  ineficiente  y  bloqueante,  lo  que  en  el 
mundo  de  la  web  es  intolerable. 


La  asincronía  es  una  característica  propia  de  ciertos  métodos  que  permiten  su 
ejecución  en  un  segundo  plano.  De  tal  forma  que  resulta  imposible  saber  cuando 
terminarán  y  además  antes  de  terminar  su  ejecucción  se  ejecutan  la  siguiente  línea 
de  código. 
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Cuando  en  JavaScript  se  habla  de  asincronía,  lo  que  realmente  está  ocurriendo  es  que 
dejamos  de  ejecutar  partes  de  nuestro  script  de  manera  secuencial.  Esto  crea  un  efecto 
curioso  que  tiene  como  consecuencia,  un  script  muy  escalable  y  rápido,  ya  que  el  sistema 
no  espera  a  que  algo  termine  para  seguir  ejecutando  el  resto  del  script. 

O  La  mala  noticia,  es  que  recaerá  en  el  lector  todo  el  peso  de  controlar  esos  caballos 
desbocados.  La  asincronía  es  tan  potente,  que  no  existe  otra  forma  de  trabajar 
sobre  Node.js.  Por  eso  Node.js  está  concebido  -de  principio  a  fin-  como  un  sistema 
asincrono. 


Existen  muchas  formas  de  manejar  la  asincronía. 

•  Paso  de  continuadores  (Callbacks). 

•  Eventos. 

•  Promesas  (ECMA6  y  librerías...). 

•  Generadores  (ECMA6,  Closures,  etc. . .). 

Nosotros  veremos  en  este  capítulo  -exclusivamente-  la  gestión  de  asincronía  por  medio  de 
callbacks. 

En  el  próximo  capítulo  hablaremos  de  programación  dirigida  por  eventos  y  como  gestionar 
con  ello  la  asincronía. 

Para  hacer  un  poco  más  fluido  esta  explicación,  utilizaremos  setTimeout  que  por  defecto  es 
una  función  asincrona. 

Veamos  como  funciona  el  código  sin  gestionar  la  asincronía: 

function  traigoDatos  (){ 

//  Asincrona 
setTimeout  (function(){ 

console.log  ("Esto  son  mis  datos"); 

} , 2000) 

} 


function  pintoDatos( ) { 

//  No  asincrona 

consolé . log( "ya  tengo  los  datos"); 

} 

traigoDatos( ) ; 
pintoDatos( ) ; 


Como  puedes  ver...  los  mensajes  no  salen  en  el  orden  correcto.  Recuerda  que,  para  pintar 
datos,  el  paso  previo  -siempre-  es  tener  esos  datos  disponibles. 

Ahora  vamos  a  intentar  resolver  este  problema  de  una  manera  sencilla.  Si  introducimos  un 
callbacken  la  función  asincrona,  seremos  capaces  de  resolver  el  problema...  aunque  tarde 
3  segundos  o  5  minutos. 
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function  traigoDatos  (callback){ 

//  Asincrona 
setTimeout  (function(){ 

console.log  ("Esto  son  mis  datos"); 

//  Llamamos  a  Callback  cuando  haya  llegado  el  fin  de  traigoDatos . 
cal lback( ) ; 

} , 2000) 

} 

function  pintoDatos( ) { 

//  No  asincrona 

consolé . log( "ya  tengo  los  datos"); 

} 

traigoDatos(pintoDatos) ; 

Al  ejecutarlo  podemos  ver  que  el  problema  de  la  asincronía  ha  sido  resuelto. 

Normalmente,  a  la  hora  de  hacer  peticiones  asincronas,  solemos  pedir/enviar  información 
al  servidor...  y  hacemos  esto  a  través  de  peticiones  AJAX  (también  asincronas).  Cuando 
realizamos  ese  tipo  de  llamadas,  queremos  pasarle  al  callback  los  datos  que  nos  han  llegado 
del  servidor. 

¡Veamos  como  hacerlo! 


function  traigoDatos  (callback){ 

//  Asincrona 
setTimeout  (function(){ 

//  muchas  cosas  pasan. . . 

var  resultado  =  "Esto  son  mis  datos"; 

//  Llamamos  a  Callback  y  pasamos  el  resultado 
cal lback( resultado) ; 

} , 2000) 

} 

function  pintoDatos(data){ 

//  No  asincrona 

consolé . log( "ya  tengo  los  datos:"); 
consolé. log(data) ; 


traigoDatos(pintoDatos) ; 


1 

2 

3 

4 

5 

6 

7 

8 

9 

10 

11 

12 

13 

14 


Capítulo  10  -  Funciones 


101 


Sobrevivir  al  Callback  Hell 

Callback  Hell  es  una  situación  que  se  suele  producir  cuando  los  programadores  no  dominan 
el  manejo  de  la  asincronía,  ni  el  uso  de  los  callbacks.  También  se  produce,  cuando  no  han 
respetado  conceptos  básicos  de  modularización  y  prevención  de  anidación  desmedida. 

Algunas  soluciones  a  este  problema: 

•  No  anidaren  exceso...  ¿Has  oído  hablar  de  la  complejidad  ciclomática?. 

•  Cualquier  anidación  de  funciones  a  más  de  dos  o  tres  niveles  está  pidiendo  a  gritos  una 
refactorización. 

•  Notodas  las  funciones  de  tu  código  han  de  ser  anónimas... 

•  Modularizary  refactorizar  son  tusóos  mejores  amigos  en  JavaScript. 

•  Gestiona  los  errores  en  cada  función  y  no  al  final  de  la  pila. 

Si  aún  así  te  ves  totalmente  incapaz  de  prevenir  este  error,  siempre  puedes  recurrir  a 
Generadores,  Promesas,  Funciones Async...  o  librerías  como  Async,  Q,  etc... 


Documentar 


Si  recordamos  el  tercer  capítulo,  dijimos  que  JSDoc  nos  resultaría  muy  útil  en  el  futuro  para 
entenderydocumentarespecialmente  nuestrasfunciones. Veamos  de  nuevo  aquelejemplo, 
esta  vez  con  una  mirada  más  crítica. 

/** 

*  Retorna  los  detalles  del  libro. 

*  §param  { string}  title  -  Título  del  libro. 

*  §param  { string }  author  -  Autor  del  libro. 

*  §returns  {object}  title,  author,  picture  (referencia  local),  code 
*/ 

function  Book(title,  author)  { 

return  { 


title:  title, 
author:  author, 

picture  " . . /images/"+author+"/"+title+" . jpg" , 
code:  010203  +  author  +  "/"  +  title 


A 


¡Volver  atrás!: 

Ahora  puede  ser  un  buen  momento  para  volver  a  capítulos  anteriores,  donde  era 
necesario  hacer  uso  de  las  funciones  para  gestionar  ciertos  métodos  complejos  en 
arrays  y  objetos. 


Parte  III  -  Web  dinámica  y 
conectada... 
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window 


history 

Array 

location 

Function 

XMLHttpRequest 


Imagen  obtenida  de  javascript.info 

Ala  hora  de  trabajar  con  el  navegador  fuera  de  la  consola,  disponemos  básicamente  de  tres 
pilares: 

JavaScript 

Que  es  lo  que  intentamos  aprender  a  lo  largo  de  este  libro,  y  que  nos  permite  en  esencia 
programar  sobre  la  web  que  está  renderizada  en  el  cliente. 

BOM 

Browser  Object  Model,  que  contiene  navigator,  history,  screen,  location,  XMLHttpRe¬ 
quest,  etc...  los  cuales  son  hijos  de  window. 

DOM 

Document  Object  Model,  es  una  interfaz  para  HTML,  CSS  y  SVG  que  nos  facilita  una 
representación  en  forma  de  árbol  sobre  la  que  podremos  trabajar  con  JavaScript. 


BOM  (Browser  Object  Model) 

Es  una  recopilación  de  los  componentes  más  utilizados,  aunque  existen  algunos  más. 


window.history 

Nos  permite  manipular  el  historial  de  la  sesión  actual,  eso  incluye  solamente  las  páginas 
visitadas  con  la  pestaña  actual. 
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Podemos  averiguar  la  cantidad  de  páginas  visitadas  previamente,  haciendo  uso  de  la  pro¬ 
piedad  length. 


history . length 


También  podemos  realizar  acciones,  como  mandar  al  usuario  a  la  pagina  inmediatamente 
siguiente  con  el  método  forward,  a  la  anterior  con  back()  o  directamente  a  cualquier  posición 
del  historial  con  go(). 


//  Ir  atrás 

history . go( -1 ) ; 
history . back( ) ; 

//  Ir  adelante 

history . go(l ) ; 
history . forward( ) ; 


win  dow.na  viga  to  r 

Es  un  API  que  nos  permite  sacar  gran  cantidad  de  información  sobre  la  máquina  donde  se 
está  ejecutando  nuestro  script.  Incluso  dispone  de  algunos  métodos  tan  interesantes  como 
Navigator.vibrate(),  que  permite  hacer  vibrar  el  dispositivo  (siempre  que  sea  compatible). 

En  el  siguiente  ejemplo,  hacemos  una  lectura  de  gran  información  del  sistema  y  además 
hacemos  un  par  de  cálculos  interesantes  para  confirmar  el  nivel  de  batería. 

En  la  línea  28  hemos  utilizado  una  promesa,  ya  que  navigator.getBattery()  lo  requiere  así. 
Recuerda  que  ésta  es  otra  de  las  formas  válidas,  que  existen  para  manejar  la  asincronía. 


function  conversorTiempo(segundos ) { 

var  fecha  =  new  Date(segundos  *  1000); 
var  hh  =  fecha . getUTCHours( ) ; 
var  mm  =  fecha . getUTCMinutes( ) ; 
var  ss  =  fecha . getSeconds( ) ; 

if  (hh  <  10)  {hh  =  "0"+hh ; } 

if  (mm  <  10)  {mm  =  "0"+mm;} 

if  (ss  <  10)  {ss  =  "0"+ss;} 

return  hh+" : "+mm+" : "+ss ; 

} 

function  informacionSistema( ) { 

consolé . log( "appCodeName : " ,  window . navigator . appCodeName) ; 
consolé . log( "appName : " ,  window . navigator . appName) ; 
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consolé . log( "appVersion : " ,  window . navigator . appVersion ) ; 
consolé . log( "platform : " ,  window . navigator . platform) ; 
consolé . log( "product : " ,  window . navigator . product) ; 
consolé . log( "userAgent : " ,  window . navigator . userAgent) ; 
consolé . log( " javaEnabled : " ,  window . navigator . javaEnabled( ) ) ; 
consolé . log( " language  (used):",  window . navigator . language) ; 
consolé . log( " language  (support) : " ,  window . navigator . languages) ; 
consolé . log( "conectado  a  internet?",  window . navigator . onLine) ; 
consolé . log( "mimeTypes : " , window . navigator . mimeTypes) ; 
consolé . log( "Plugins : ",  navigator . plugins) ; 

navigator . getBattery( ) . then( function(bateria) { 

consolé . log( "Batería  cargando?",  batería . charging) 

i f (batería . charging) { 

consolé . log( "Tiempo  de  carga:",  batería . chargingTime) 

} 

consolé . log( "Batería  batería . level *100) 

consolé . log( "Tiempo  restante : " ,  conversorT i empo( batería . dischargingTime) ) 

}); 


} 

window. screen 

Esta  API  nos  permite  sacar  toda  la  información  disponible  de  la  pantalla  (márgenes,  pro¬ 
fundidad  del  color...),  así  podremos  bloqueary  desbloquear  la  rotación  de  la  pantalla  en  el 
dispositivo. 

consolé . log( "avai lTop : " ,  window . screen . avai lTop) ; 
consolé . log( "avai lLeft : " ,  window . screen . avai lLeft) ; 
consolé . log( "avai lHeight : " ,  window . screen . avai lHeight) ; 
consolé . log( "avai lWidth : " ,  window . screen . avai lWidth ) ; 
consolé . log( "colorDepth : " ,  window . screen . colorDepth ) ; 
consolé . log( "height : ",  window . screen . height) ; 
consolé . log( " left : ",  window . screen . left) ; 
consolé . log( "or ientation : " ,  window . screen . or ientation ) ; 
consolé . log( "pixelDepth : " ,  window . screen . pixelDepth ) ; 
consolé . log( "top : " ,  window . screen . top) ; 
consolé . log( "width : " ,  window . screen . width ) ; 
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Window.location  y  Document.location 

Según  la  I/I/3C  ambos  objetos  son  lo  mismo. 

Propiedades 

var  enlace  =  document . createElement( ’ a  1  ) ; 

enlace. href  =  'https://leanpub.com/javascript-inspirate'; 

consolé . log( "href : "  , enlace . href) ; 
consolé . log( "protocol : " ,  enlace . protocol ) ; 
consolé . log( "host : " ,  enlace . host) ; 
consolé . log( "hostname : " ,  enlace . hostname) ; 
consolé . log( "port : " ,  enlace . port) ; 
consolé . log( "pathname : " ,  enlace . pathname) ; 
consolé . log( "search : " ,  enlace . search ) ; 
consolé . log( "hash  : " ,  enlace . hash ) ; 
consolé . log( "or igin : ",  enlace . or igin ) ; 


Métodos: 

•  .assign() 

Carga  una  nueva  página. 

document . location . assign( ' https : //leanpub . com/javascript- inspirate ' ) ; 

•  .reload() 

Recarga  la  página  actual  con  opciones  para  manejar  el  cacheado. 

1  //  Recarga 

document . location . reload( ) ; 

3 

4  //  Recarga  sin  usar  el  cache 

5  document . location . reload(true) ; 

•  .replace() 

Carga  una  página  nueva,  sustituyendo  la  actual  en  el  historial. 

document . location . replace( ' https : //leanpub . com/javascript- inspirate ' ) ; 
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DOM 


Veamos  como  entiende  la  comunidad  MDN  (Mozilla  Developer  Network)  el  concepto  DOM  - 
Document  Object  Model. 


El  modelo  de  objeto  de  documento  (DOM)  es  una  interfaz  de  programación  para  los 
documentos  HTML  y  XML.  Facilita  una  representación  estructurada  del  documento 
y  define  deque  manera  los  programas  pueden  acceder,  con  el  fin  de  modificar,  tanto 
su  estructura,  estilo  y  contenido.  El  DOM  da  una  representación  del  documento  co¬ 
mo  un  grupo  de  nodos  y  objetos  estructurados  que  tienen  propiedades  y  métodos. 
Esencialmente,  conecta  las  páginas  web  a  Scripts  o  lenguajes  de  programación. 


Una  página  web  es  un  documento.  Éste  documento  puede  exhibirse  en  la  ventana 
de  un  navegador  o  también  como  código  fuente  HTML.  Pero,  en  los  dos  casos,  es 
el  mismo  documento.  El  modelo  de  objeto  de  documento  (DOM)  proporciona  otras 
formas  de  presentar,  guarda  y  manipular  este  mismo  documento.  El  DOM  es  una 
representación  completamente  orientada  al  objeto  de  la  página  web  y  puede  ser 
modificado  con  un  lenguaje  de  script  como  JavaScript. 


Nosotros  creemos  que  el  DOM  es  patio  de  juegos  de  cualquier  developer  que  se  precie.  Tanto 
si  haces  frontend  y  lo  utilizas  para  mostrar  información  dinámicamente  como  si  estás  en  el 
backend  y  lo  utilizas  para  scrapear. 

A  los  ojos  de  JavaScript  el  DOM  es  un  objeto  con  el  que  podremos  leer  y  modificar  a  nuestro 
antojo.  Una  vez  se  comprende  con  claridad  la  estructura  de  nodos  que  lo  compone  y  sus 
métodos  pricipales,  está  dominado. 

Selectores 

El  primer  paso  para  poder  manipular  el  DOM,  es  adquirir  cierta  destreza  en  el  manejo  de  los 
selectores,  ya  que  siempre  los  selectores  serán  el  primer  paso,  para  realizar  operaciones  de 
lectura  o  modificación  del  DOM. 

Es  importante  remarcar,  que  ciertos  métodos  para  realizarselección  de  componentes,  sufren 
del  mismo  problema  que  vimos  en  arguments,  ya  que  aunque  parecen  arrays...  realmente 
no  lo  son. 

Estos  métodos  son: 

•  Node.childNodes 

•  document.querySelectorAll 

O  Podemos  convertirlos  fácilmente: 

1  var  listaDivs  =  document . querySelectorAl 1 (' div ') ; 

2  //  Conversión 

3  var  1 istaDi vsArray  =  Array . prototype . si  ice . cal  1 ( 1 istaDivs) ; 


Más  información  sobre  la  conversión  en  Convert  NodeList  to  Array  de  David  Walsh. 
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Selectores  tradicionales 

•  .getElementByldO 

Permite  la  selección  de  un  elemento  por  su  id. 

1  //  <di v  id="miDiv" > </div> 

2  document . getElementBy Id( "miDiv" ) ; 

•  .getElementsByNameO 

Permite  la  selección  de  varios  elementos  por  su  atributo  ñame. 

1  //  <form  name="miForm" > </form> 

2  document .  getElementsByiMame(  "miForm"  ) ; 

•  .getElementsByTagNameO 

Permite  la  selección  de  varios  elementos  por  su  etiqueta. 

1  //  <input> 

2  document .  getElementsByTagiMame( "  input" ) ; 

•  .getElementsByClassNameO 

Permite  la  selección  de  varios  elementos  por  su  clase. 

1  //  <div  class="rojo" >  </div> 

document .  getElementsByClassl\lame(  "rojo"  ) ; 

Selectores  Avanzados 


Lecturas  recomendadas: 


•  Los  30  selectores  CSS  que  debes  memorizar 

•  Selectors  Level  3  -  W3C 

•  CSSCheotSheet 

•  Taming  Advanced  CSS  Selectors  by  Inayaili  de  León 

•  Selectors  en  MDN 

•  CSS  Selector  Reference  by  w3schools 

•  CSS  Selectors  byAdam  Roberts 

•  CSS-TRICKS  Selectors 

•  Interactive  CSS  Selectors  by  Ben  Howdle 


Si  has  trabajado  intensamente  con  CSS3  ya  sabrás  que  existen  muchas  posibilidades  para 
realizar  selecciones  dentro  de  un  documento  html  que  van  mucho  más  alia  de  la  clase,  id, 
etiqueta  o  propiedades,  ya  que  el  soporte  para  ello  es  muy  bueno  en  todos  los  navegadores. 

JavaScript  no  se  queda  atras  y  se  pueden  usar  querySelector  y  querySelectorAll  que  además 
gozan  de  un  gran  soporte. 

Veamos  como  se  utilizan  algunos  selectores  avanzados  de  CSS3: 

•  URL  que  empieza  con  “javascript:” 
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1  a  [href A  =  " javascr ipt : "  ]  { 

color : blue; 

3  } 

•  URL  que  contiene  “google.es” 

a [href*="google . es" ]  { 

color : orange ; 

3  } 

•  URL  que  termina  con  “pdf” 

1  a[href$=" .pdf"]  { 

color : red ; 

3  } 
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.querySelector() 

Devuelve  el  primer  elemento  que  coincida  con  el  selector. 

<div  id="miDiv" > 

<span  id="mild5"  class="miClase"  title="cinco" > </span> 
<span  id="mild4"  class="miClase"  title="cuatro" > </span> 
<span  id="mild3"  class="miClase"  title="tres" > </span> 
<span  id="mild2"  class="miClase"  title="dos" > </span> 
<span  id="mildl"  class="miClase"  title="uno" > </span> 
</div> 


document . getElementBy Id( ' mi Idl ' ) . title  //  uno 

document . querySelector ( ' #miDiv  . miClase '). title  //  cinco 

document . querySelector ( ' #miDiv  *mi Idl . miClase '). title  //  uno 

document . querySelector ( ' #miDiv  . inventado '). title  //  ERROR  ->  undefined 

document . querySelector ( ' #miDiv  . miClase [titleA=u] '). title  //  uno 


.  querySelectorAllO 

Devuelve  todos  los  elementos  que  coincidan  con  el  selector  en  un  pseudo-array. 

document . querySelectorAl 1 (' p ' )  //  los  párrafos 

document . querySelectorAl 1 (' div,  img')  //  divs  e  imágenes 

document . querySelectorAl 1 ( 1  a  >  img1)  //  imágenes  contenidas  en  enlaces 

Estilos  con  JavaScript 

JavaScript  también  puede  leery  alterar  las  reglas  de  estilo,  que  afectan  a  los  elementos  que 
componen  el  DOM. 

Leer  valores 

window . getComputedStyle(document . getElementById( "id" ) ) ; 

window . getComputedStyle(document . body) . getPropertyValue( 1 display ' ) ; 

Cambiar  valores 

document . body . style . display="none" ; 

document . getElementBy Id ( " id" ) . style . display="none" ; 
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Alterando  el  DOM 

Trabajar  sin  JQuery 

Si  llevas  mucho  tiempo  trabajando  con  JQuery,  sin  duda,  ya  estás  muy  acostumbrado  a 
utilizar  ciertos  métodos  como  show(),  hide(),  empty(),  append()  y  muchos  más. . . 

Para  haceros  la  transición  más  fácil,  HubSpot  ha  desarrollado  You  Mlght  Not  Need  Jquery, 
que  te  permite  visualizar  como  hacer  todo  lo  que  hacías  con  JQuery  y  que  ahora  harás  con 
JavaScript. 

Métodos  esenciales 

Hacemos  una  recopilación  simplificada  de  los  métodos  más  utilizados,  aunque  existen 
muchos  más. 

•  .textContent 

Nos  devuelve  el  texto  de  un  elemento  previamente  seleccionado. 

1  var  el  =  document . getElementBy Id( ' miDiv ' ) ; 
consolé . log( "Texto : " ,  el . textContent) ; 

También  permite  cambiarlo. 

1  var  el  =  document . getElementBy Id( ' miDiv 1 ) ; 
el . textContent  =  "Nuevo  contenido"; 

•  .classList.contains() 

Verifica  si  contiene  cierta  clase. 

1  var  el  =  document . getElementBy Id( ' miDiv ') ; 
el .  classList . contains( "rojo" ) ; 

•  .classList.add() 

Permite  añadir  una  clase  al  elemento. 

1  var  el  =  document . getElementBy Id( ' miDiv ') ; 

2  el . classList . add( "rojo" ) ; 

•  .classList.  remove(className) 

Permite  eliminar  una  clase  del  elemento. 

1  var  el  =  document . getElementBy Id( ' miDiv ') ; 
el .classList . remove( "rojo" ) ; 
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•  .style. display 

Nos  permite  conocer  y  modificar  la  visualización  de  un  elemento  concreto. 

1  var  el  =  document . getElementBy Id( ' miDiv ' ) ; 

2 

3  //  Conocer  el  estado  actual 

4  consolé . log(el . style . display) ; 

5 

6  //  No  mostrar 

el . style . display  =  'none'; 

8 

9  //  Mostrar 

10  el . style . display  = 

•  .cloneNode() 

Permite  clonar  un  nodo  y  clonar  o  no,  sus  nodos  hijo  también. 

1  var  el  =  document . getElementById( ' miDiv 1 ) ; 

2 

3  //  Clon  simple  (sin  hijos) 

4  var  el  =  el . cloneNode( ) ; 

5 

6  //  Clon  profundo  (con  hijos) 

var  c2  =  el . cloneNode(true) ; 

•  .innerHTML  Cambia  o  devuelve  la  sintaxis  HTML  de  un  elemento...  así  como  de  sus 
hijos. 

1  var  el  =  document . getElementBy Id( ' miDiv ') ; 

2  //  Ver  el  contenido 

consolé . log( "Contenido : " ,  el . innerHTML) ; 

4 

5  //  vaciar  el  contenido 

6  el . innerHTML  =  ' ' ; 

7 

8  //  Sustituir  el  contenido 

9  el. innerHTML  =  'Nuevo  contenido'; 

•  .getAttribute() 

Devolver  el  valor  de  cierto  atributo  o  una  cadena  vacía  en  caso  de  no  existir. 

1  var  el  =  document . getElementById( ' fotoUsuario ') ; 
el . getAttribute( ' src '  ) ; 

•  .setAttribute() 

Cambiar  el  valor  de  un  atributo  o  lo  añade  si  no  existe. 
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var  el  =  document . getElementById( ' miDiv ' ) ; 
el . setAttr ibute( ' data -secreto ' ,  1  Mucho. . . 1 ) ; 


Eventos 


Una  de  las  mayores  barreras  a  la  hora  de  introducir  el  dinamismo  en  una  web  es  la  gestión 
de  los  eventos,  ya  que  estos  son  asincronos  por  naturaleza,  por  lo  que  no  puedes  saber  de 
antemano.  Por  ejemplo,  cuántos  segundos  tardará  un  usuario  en  pinchar  sobre  un  botón... 
lo  que  sumado  a  un  funcionamiento  peculiar  con  propagaciones,  hace  que  el  dominio  de  los 
eventos  sea  una  tarea  complicada. 

O  Sin  embargo,  todo  gran  esfuerzo  tiene  una  gran  recompensa  y  el  dominio  de  estos 
eventos  nos  a  brirá  las  puertas  a  la  programación  dirigida  a  eventos,  y  posteriormente 
a  Node.js,  si  decidimos  dar  el  gran  paso  hacia  el  Back-End  o  el  Full  Stack. 


Funcionamiento 

Básicamente  podemos  seleccionar  un  elemento  de  HTML,  y  suscribir  uno  de  los  posibles 
eventos  de  los  que  dispone: 

•  Eventos  de  ratón 

•  Eventos  de  teclado 

•  Y  muchos  más... 

Una  vez  hemos  definido  estos  detalles,  en  dónde  escuchamos  y  qué  esperamos,  solo  queda 
definir  que  haremos  cuando  esto  ocurra. 

Lógicamente  al  tratarse  de  asincronía,  debemos  definir  una  función,  ya  sea  en  línea  o 
reutilizable  para  gestionarlo  todo. 

Si  necesitamos  información  adicional  sobre  el  evento  sucedido,  el  propio  sistema  mandará 
un  objeto  con  detalles  clave  sobre  el  evento,  como  argumento  a  la  hora  de  ejecutar  nuestro 
callback. 


Utilizando  eventos 

Existen  dos  formas  básicas  de  añadir  eventos  a  nuestra  aplicación.  Una  es  por  medio  de  html 
con  atributos  como  onclick,  y  la  otra  desde  el  JavaScript,  haciendo  uso  de  métodos  como 
.addEventListener(). 

Cuáles  mejor  o  cuáles  peor...  realmente  varia  en  función  de  las  circunstancias  del  código  y 
su  programador.  Yo  creo  firmemente,  que  es  mucho  mejor  separar  JavaScript,  HTML  y  CSS. 
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Así  evitamos  el  antipatrón  de  mezclar  JavaScript  en  el  HTML.  Por  otra  parte,  si  encapsulas 
tu  código  en  una  función  anónima  autoejecutada,  no  podrás  acceder  a  las  funciones  direc¬ 
tamente  desde  el  HTML... 

Así  que  por  estos  motivos  principales,  recomendamos  encarecidamente  el  uso  de  .addE- 
ventListener(). 

Añadir  un  evento 

Veamos  como  funciona  con  onclick. 


<body  oncl i ck=" cambiar Fondo ( ) " > </body> 


function  cambiarFondo( )  { 

//  color  =  ’rgb(0-255, 0-255, 0-255) ' 

var  color  =  'rgb('  +  Math . f loor ( ( Math . random( )  *  255))+ 
color  +=  Math . f loor (( Math . random( )  *  255))  + 
color  +=  Math . f loor (( Math . random( )  *  255))  +  ')'; 
document . body . style . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 


Veamos  como  funciona  con  addEventListener(). 

document . body . addEventListener( ' el ick 1 ,  function  (e)  { 

var  color  =  ’rgb(’  +  Math . floor( (Math . random( )  *  255))+ 
color  +=  Math . floor( (Math . random( )  *  255))  + 
color  +=  Math . floor( (Math . random( )  *  255))  +  ')'; 
document . body . style . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 


Eliminar  un  evento 

Los  eventos  ocupan  memoria.  Es  un  factor  a  tener  en  cuenta,  especialmente,  si  queremos 
hacer  una  web  con  un  buen  soporte  para  smartphones.  Si  un  evento  deja  de  tener  sentido, 
sencillamente  puedes  eliminarlo  con  .removeEventListener(). 
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function  cambiarColor  (){ 

var  color  =  'rgb('  +  Math . f loor( (Math . random( )  *  255))+ 
color  +=  Math . floor( (Math . random( )  *  255))  + 
color  +=  Math . floor( (Math . random( )  *  255))  +  ')'; 
document . body . sty le . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 

} 

document . body . addEventListener( 'click' ,  cambiarColor); 
document . body . removeEventL i stener( 'click' ,  cambiarColor); 


Manejadores  de  eventos 

Cuando  se  dispara  un  evento,  podemos  recopilar  mucha  información  útil,  si  no  ignoramos 
el  argumento  que  nos  pasan. 

Podemos  fácilmente  crearnos  una  función  que  nos  aporte  información  real  sobre  el  evento  y 
que  no  ejecute  ninguna  acción  en  nuestra  aplicación.  Este  tipo  de  funciones  son  muy  útiles  y 
deberían  estar  en  tu  kit  de  herramientas  para  desarrollar  webs  como  un  artesano  de  verdad. 


function  manejadorEventos(elEvento)  { 

//  Compatibi 1  izar  el  evento 

var  evento  =  elEvento  | |  window . event ; 


//  Imprimir  detalles 

consolé .  log(  " - ") 

consolé . log( "Type :  "+evento . type) ;  //  Tipo 
consolé . log( "Bubbles :  "+evento . bubbles ) ; 
consolé . log( "Canee lab le :  "+evento . cancel able) ; 
consolé . log( "CurrentTarget :  ",  evento . currentTarget) ; 
consolé . log( "DefaultPrevented :  "+evento . defaultPrevented ) ; 
consolé . log( "EventPhase :  "+evento . eventPhase) ; 
consolé . log( "Target :  ",  evento . target) ; 
consolé . log( "TimeStamp :  "+evento . timeStamp) ; 

consolé . log( " IsTrusted :  "+evento . isTrusted ) ;  //  true  -  Usuario 
consolé . log( "=============================" ) 


//  Añadimos  Listener 

document . addEventListener( 'click' ,  function(evento) { 
mane j ador Eventos (evento) ; 

//  Más  código 

}); 
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Usos  Avanzados 

Lanzar  un  evento  manualmente  con  .dispatchEvent() 

document . body . addEventListener( ' el ick 1 ,  function  (e)  { 

var  color  =  ’rgb('  +  Math . f loor( (Math . random( )  *  255))+ 
color  +=  Math . floor( (Math . random( )  *  255))  + 
color  +=  Math . floor( (Math . random( )  *  255))  +  ')'; 
document . body . sty le . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 

}); 

var  lanzadorEventos  =  new  Event( ' el ick ' ) ; 

document . body . dispatchEvent( lanzadorEventos) ; 


Compatibilidad  con  Internet  Explorer  <=  IE8 

Si  tienes  la  mala  suerte  de  tener  que  dar  soporte  a  versiones  obsoletas  de  Internet  Explorer, 
además  de  todo  el  sufrimiento  acumulado,  deberás  añadirte  una  carga  extra...  y  es  que 
por  aquel  entonces  Internet  Explorer,  no  era  compatible  con  oddEventL¡stener(),  ni  con 
,removeEventListener(),  así  que  necesitamos  utilizar.  attachEvent()  y.  detachEvent(). 

.attachEvent() 


document . attachEvent( ' onel ick ' ,  function  (e)  { 

var  color  =  ’rgb('  +  Math . floor( (Math . random( )  *  255))+ 
color  +=  Math . floor( (Math . random( )  *  255))  + 
color  +=  Math . floor( (Math . random( )  *  255))  +  ')'; 
document . body . sty le . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 


.detachEvent() 


function  cambiarColor  (){ 

var  color  =  ’rgb(’  +  Math . floor( (Math . random( )  *  255))+ 
color  +=  Math . floor( (Math . random( )  *  255))  + 
color  +=  Math . floor( (Math . random( )  *  255))  +  ')'; 
document . body . sty le . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 

} 

document . body . attachEvent( 'onclick' ,  cambiarColor); 
document . body . detachEvent( 'onclick' ,  cambiarColor); 
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Dado  este  panorama  de  tener  que  usar  dos  métodos  diferentes,  cuando  además  tienen  una 
estructura  similar,  pero  no  idéntica. . .  tenemos  un  reto  entre  manos  que  merece  una  solución 
duradera. 

Aunque  descartamos  enseñar  el  uso  de  patrones,  sería  injusto  por  nuestra  parte  no  arrojar 
al  menos  un  poco  de  luz  sobre  el  asunto,  así  que  nos  gustaría  mostrarte  un  par  de  trucos  de 
“artesano  veterano”. 

Vamos  a  crear  un  objeto  (literal),  donde  guardaremos  todo  lo  necesario  para  manejar 
eventos,  subiendo  así  el  nivel  de  abstracción  de  vuestra  aplicación. 

Ya  no  usaremos  ,attachEvent()  o  ,addEventL¡stener().  Ahora  utilizaremos  ,agregar(),  que 
internamente  llamará  a  ,attachEvent()  o  .addEventL¡stener(),  en  función  del  navegador  en 
el  que  nos  encontremos. 

Cambiar  de  navegador  en  medio  de  la  ejecución  del  script  parece  altamente  improbable. 
No  tiene  mucho  sentido  comprobar  cada  vez  que  agreguemos  un  evento,  si  usaremos 
.attachEvent()  o  ,addEventListener(). 

Por  eso  los  patrones  de  diseño  pueden  ayudarnos  a  solucionar  cosas  así.  En  este  caso 
usaremos  Init-time  branching,  que  es  una  variante  de  Lazy  initialization. 

Básicamente  crearemos  un  objeto  con  los  métodos  agregar  y  quitar  vacíos.  Al  ejecutarse 
el  código  por  primera  vez,  comprobaremos  que  navegador  usamos  y  en  función  de  ello 
sobreescribirá  agregar  y  quitar,  llamando  por  debajo  a  los  métodos  correspondientes. 

Es  un  poco  más  de  trabajo  de  lo  esperado,  pero  así  es  mucho  mas  sencillo  gestionar  nuestra 
aplicación,  ya  que  nuestros  métodos  se  adaptarán  y  no  así  nuestro  código. 

El  valor  añadido  de  usar  este  patrón  está  en  que  en  un  solo  punto  tomo  una  decisión  que  se 
extenderá  por  toda  nuestra  aplicación. 

var  eventos  =  { 

agregar:  nuil, 
quitar:  nuil, 

manejador  function(evento)  { 
consolé . group( "Manejador  de  Eventos"); 

consolé .  log( " - "); 

consolé . log( "Type :  "  +  evento . type) ;  //  Tipo 

consolé . log( "Bubbles :  "  +  evento . bubbles ) ;  //  sube  por  el  DOM 

consolé . log( "Cancelable :  "  +  evento . cancelable) ; 

consolé . log( "CurrentTarget :  ",  evento . currentTarget) ; 

consolé . log( "DefaultPrevented :  "  +  evento . defaultPrevented ) ; 

consolé . log( "EventPhase :  "  +  evento . eventPhase) ; 

consolé . log( "Target :  ",  evento . target) ; 

consolé . log( "TimeStamp :  "  +  evento . timeStamp) ; 

consolé . log( " IsTrusted :  "  +  evento . isTrusted) ;  //  true  -  Usuario 
consolé . log( "=============================" )  ■ 

consolé . groupEnd( ) ; 

} 
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} 

//  Init-time  branching  (Patrón) 

if  (typeof  window . addEventListener  ===  'function')  { 
eventos . agregar  =  function(el,  type,  fn)  { 

el . addEventListener(type,  fn,  false); 

}; 

eventos . quitar  =  function(el,  type,  fn)  { 

el . removeEventListener(type,  fn,  false); 

}; 

}  el se  {  //  Soporte  para  <=  IE8 

eventos . agregar  =  function(el,  type,  fn)  { 
el . attachEvent( ' on 1  +  type,  fn); 

}; 

eventos . quitar  =  function(el,  type,  fn)  { 
el . detachEvent( ' on '  +  type,  fn); 

}; 

} 


eventos . agregar (document . body,  'click1,  function  (e)  { 

var  color  =  'rgb('  +  Math . f loor ( ( Math . random( )  *  255))+ 
color  +=  Math . f loor (( Math . random( )  *  255))  + 
color  +=  Math . f loor (( Math . random( )  *  255))  +  ')'; 
document . body . style . backgroundColor=  color ; 
consolé . info( "Nuevo  color:",  color); 


Delegación  de  Eventos 

Una  de  las  técnicas  más  útiles  para  ahorrar  memoria,  es  utilizar  la  delegación  de  eventos,  es 
decir,  en  vez  de  poner  un  evento  porcada  uno  de  los  elementos  que  compone  una  estructura 
de  datos,  es  preferible  hacerlo  únicamente,  sobre  el  elemento  padre  común  a  todos  ellos  y 
simplemente  filtrar  cuál  de  los  hijos  fue  disparado. 

Modo  Clásico  (sin  delegación) 

<ul  id="miNav" > 

<li><a  href="wnosotros"> ¿Quienes  Somos?</a> < / 1 i > 

<li><a  href=',:B:objetivos">Los  objetivos</a>  </l i > 

<li><a  href="wequipo" > Nuestro  Equipo</a> < / 1 i > 

<li><a  href="#detal les" >Más  detal les</a> < / 1 i > 

<li>  <a  href="wcontacta">Contactanos</a>  < / 1  i > 


</ul> 
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var  miNav  =  document . getElementBy Id( "miNav" ) ; 
var  miNavLinks  =  miNav . getElementsByTagName( "a" ) ; 

for  (var  i  =  0;  i  <  miNavLinks . length;  i++)  { 
miNavLinks [ i ]. oncl ick  =  function(){ 

consolé. info(this. innerHTML) ; 

} 

}; 

Modo  Delegando 

var  miNav  =  document . getElementById( "miNav" ) ; 
miNav. onclick  =  function(evento) { 

var  evento  =  evento  I |  window . event; 
var  elemento  =  evento . target  ||  evento . srcElement; 
consolé . i nfo( elemento . innerHTML ) ; 

}; 


Creación  de  Eventos  Personalizados 

Otra  estrategia  más  avanzada,  es  hacer  nuestro  código  más  modular  e  interconectado  por 
eventos,  aunque  esto  es  más  típico  de  Node.js.  En  el  lado  del  cliente  también  podemos  hacer 
uso  de  ello. 

O  Como  verás  incluso  podemos  disparar  eventos,  lo  que  amplia  mucho  las  posibilida¬ 
des  para  jugar  con  páginas  web  existentes  desde  la  consola...  ¡Yo  no  digo  nada...! 


var  evento  =  new  Event( ' miEventoInventado ' ) ; 


document . body . addEventListener( 'miEventoInventado'  , 
consolé . info(e) ;  //  {isTrusted:  false} 


}); 


function  (e)  { 


document . body . dispatchEvent(evento) ; 
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Propagación  (Capturingy  Bubbling) 

Uno  de  los  puntos  de  fricción  más  altos  a  la  hora  de  trabajar  con  eventos,  es  entender  como 
funciona  la  propagación  que  JavaScript  realiza. 


Document 


Imagen  obtenida  de  W3C 

La  mejor  manera  de  entenderlo  es  con  un  ejemplo. 

Si  ejecutas  el  evento  verás  que  existe  un  pequeño  conflicto  de  intereses  en  el  HTML. 
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<div  id="parent" > 

<di v  id="chi ldren" > 
Click 
</div> 

</div> 


Capítulo  11  -  Hackeando  HTML  y  CSS 


121 


Tanto  parent  como  children  tienen  eventos  suscritos.  El  problema  básico,  que  nos  encontra¬ 
mos  es  que  children  está  envuelto  por  parent,  lo  que  hace  que  pinchemos,  donde  pinchemos 
siempre  se  disparan  ambos. 

Esto  se  debe  a  la  propagación,  que  funciona  en  tres  fases: 

Capturing 

Recorre  todo  el  documento  desde  document  hasta  el  elemento  en  sí. 

Target 

Es  cuando  se  llega  al  elementos  en  cuestión. 

Bubbling 

Realiza  el  recorrido  de  vuelta  hacía  arriba  desde  el  elemento  en  sí. 

Podemos  interrumpir  este  proceso  de  propagación  si  hacemos  uso  de  stopPropagation(). 

Como  has  podido  ver,  el  ejemplo  en  sí  que  hemos  utilizado  aquí,  fuerza  un  poco  la  situación, 
ya  que  existe  mucho  código  duplicado  y  gestiona  los  eventos  de  una  manera  incorrecta. 

Otro  método  interesante,  que  no  debemos  perder  de  vista  es  .preventDefault.  Evita  el 
comportamiento  por  defecto,  por  ejemplo  si  queremos  que  un  link  no  actúe  como  tal. 

Al  contrario  de  lo  que  pueda  parecer  ahora  mismo,  la  propagación  es  uno  de  los  mejores  alia¬ 
dos  a  la  hora  de  gestionar  nuestros  eventos,  como  vimos  anteriormente  con  la  delegación 
de  eventos. 


Capítulo  12  -  AJAX  y  más  AJAX 

Entendiendo  HTTP/s 


Http  (Hypertext  Transfer  Protocol)  es  un  protocolo  de  comunicación  que  utilizamos  en  nues¬ 
tro  día  a  día.  Una  de  sus  características  clave  es  que  no  mantiene  el  estado,  que  ocasiona  que 
tengamos  que  buscar  alternativas  para  ello  como  las  cookies,  localStorage,  etc. . . 

Como  curiosidad  la  versión  más  utilizada  de  este  protocolo  es  la  1.1  de  1999,  aunque 
recientemente,  tenemos  ya  liberada  la  versión  2  que  incluye  muchas  mejoras  en  el  empa¬ 
quetamiento  y  transporte  de  la  información. 

La  parte  clave  a  la  hora  de  entender  este  protocolo,  es  que  sigue  un  esquema  petición- 
respuesta  entre  cliente  y  servidor,  que  hace  que  tengamos  que  refrescar  la  página  para  poder 
recibir  la  nueva  información.  Tal  como  funcionaba  la  web  a  principios  del  dos  mil... 

Si  nos  adentramos  un  poco  más,  veremos  que  esa  petición-respuesta,  básicamente  se 
compone  de  mensajes  con  una  estructura  muy  determinada. 

Línea  inicial 

En  la  petición  se  especifica  el  método  utilizado. 

En  la  respuesta  se  especifica  un  código  de  respuesta. 

Cabecera 

Podremos  encontrar  todos  los  metadatos  propios  de  la  petición  y  la  respuesta. 

Cuerpo 

Esta  parte  es  opcional  y  contiene  por  ejemplo  html,  css...  textos  planos,  lo  que  sea  en 
si  el  mensaje  desde  el  servidor,  así  como  desde  el  cliente. 

Métodos 

Cuando  navegamos  por  la  web  utilizando  el  navegador  por  defecto,  siempre  estamos  ha¬ 
ciendo  uso  del  método  GET,  pero  existen  gran  cantidad  de  métodos  con  lo  que  poder  hacer 
las  peticiones. 

Esto  es  importante,  ya  que  desde  las  peticiones  AJAX  podremos  especificar  el  método  que 
utilizaremos,  con  lo  que  si  estamos  trabajando  con  una  API  REST,  veremos  que  existe  cierta 
“correlación”  entre  las  rutas  y  los  métodos  usados. 

Los  métodos  más  utilizados  son  GET,  POST  (típico  de  formularios),  PUT  y  PELETE. 
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Códigos  de  error 

Cuando  nos  llega  la  respuesta  del  servidor,  siempre  viene  acompañada  de  un  código  numé¬ 
rico  que  nos  confirma  el  resultado  de  la  petición,  por  ejemplo,  el  mítico  error  404,  que  nos 
habremos  encontrado  en  multitud  de  ocasiones  navegando  por  la  red. 

Estos  códigos  de  estado  pueden  dividirse  en  cinco  categorías  principales: 

•  lxx  Informativas. 

•  2xx  Peticiones  Correctas. 

•  3xx  Redirecciones. 

•  4xx  Errores  Cliente. 

•  5xx  Errores  Servidor. 

Siendo  especialmente  importantes  para  nosotros,  los  4xx  y  los  5xx,  ya  que  nos  indican 
errores  que  están  sucediendo  y  esto  seguramente  derive  en  un  tráfico  de  datos  erróneo. 

O  Aquí  podéis  encontrar  la  lista  completa  y  la  especificación. 


A 


Misterioso  estado  418 

Existen  algunos  códigos  tan  increíbles  como  418. 1  'm  a  teapot. 


Trabajando  con  APIs 


Es  innegable  que  cada  día  es  más  popular,  escuchar  términos  como  API,  API  REST...  esto 
se  debe  a  la  manera  de  hacer  la  web  hoy  en  día,  con  un  gran  desacoplamiento  de  cliente  y 
servidor,  que  permite  a  un  mismo  backend,  dar  soporte  a  múltiples  soluciones  de  front,  ya 
sean  web,  móviles,  Internet  OfThings  (loT)...  e  incluso  otros  backends. 

Para  hacer  que  todo  esto  fluya,  es  necesario  comprender  que  juegan  muchos  factores  claves 
como: 


•  API 

•  REST 

•  SOAP 


Normalmente  en  el  mundo  de  la  web  cuando  nos  referimos  aúna  API,  casi  siempre  hablamos 
de  una  API  REST,  que  nos  permite  a  través  de  una  serie  de  urls  y  siguiendo  una  metodología 
CRUD,  trabajar  con  un  backend  desde  el  cliente. 
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Esto  permite  conseguir  datos  (peticiones  GET),  actualizar  datos  (peticiones  PUT),  crear 
nuevos  datos  (peticiones  POST)  y  eliminar  datos  (peticiones  Delete). 

En  la  mayoría  de  los  casos,  el  intercambio  de  información  entre  el  cliente  y  servidor  se 
realiza  utilizando  un  formato  de  intercambio  de  datos  conocido  como  JSON  y  no  XML  como 
antiguamente.  De  todo  esto  hablaremos  a  lo  largo  de  este  último  capítulo. 

O  Para  ilustrar  un  poco  el  ejemplo,  te  invito  a  visita rjsonplaceholder  que  es  una  especie 
de  Lorem  Ipsum  para  peticiones  Ajax. 

Supongamos  que  nuestro  backend  es  un  blog,  y  queremos  crear,  leer,  actualizar  y  borrar 
posts.  Nuestras  rutas  serían  algo  así: 

Petición  GET  a  api.loremblog.com/posts 

Nos  devuelve  un  JSON  con  todos  los  post  disponibles. 

Petición  POST  a  api.loremblog.com/posts 

Nos  crea  una  nueva  entrada  en  la  base  de  datos,  con  los  datos  en  JSON  que  le  hemos 
pasado 

Petición  PUT  a  api.loremblog.com/posts/hello 

Nos  permite  actualizar  la  entrada  (numero/nombre  helio)  con  los  datos  JSON  que 
hemos  pasado. 

Petición  DELETE  a  api.loremblog.com/posts/hello 

Nos  permite  borrar  la  entrada  (numero/nombre  helio). 


O  Partiendo  de  esta  filosofía,  podremos  atrevernos  con  muchas  APIs,  tan  divertidas 
como  Twitter,  Facebook,  Spotifye  incluso  Yahoo! 


Peticiones  AJAX 

Ya  hemos  visto  que  las  peticiones  Ajax  son  la  esencia  en  la  web  de  hoy,  pero  siempre  que  las 
utilicemos,  debemos  recordar,  que  nosotros  somos  consumidores/generadores  de  datos  y 
que  nuestra  aplicación,  está  dependiendo  de  manera  permanente  de  otros  sistemas. 

Esto  quiere  decir,  que  puede  haber  errores  en  su  código,  que  hagan  que  las  respuestas 
a  nuestras  peticiones  no  traigan  los  datos  como  esperamos.  Por  tanto,  tendremos  que 
hacer  un  esfuerzo  adicional  para  validar  todos  los  datos  que  recibimos.  En  ocasiones  la 
documentación  sobre  la  API,  puede  ser  poco  precisa  o  estar  desfasada. . .  dejándonos  en  una 
situación  muy  comprometida. 

Pero  la  mayoría  de  servicios  grandes  o  empresas  que  orientan  sus  líneas  de  negocio  al  API 
suelen  dar  un  buen  servicio.  Recordar  también  que  existen  APIs  de  pago.  En  ocasiones  esto 
puede  resultar  complicado,  si  estamos  desarrollando,  tenemos  que  hacer  muchas  consultas 
y  se  dispone  de  poco  presupuesto. 
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Nosotros  recomendamos,  crear  un  sistema  de  archivos  JSON  que  almacene  ciertos  datos 
estáticos,  que  sean  iguales  o  muy  similares  a  los  que  esperamos  recibir  de  la  API.  Así 
podremos  maquetar  y  desarrollar  sin  consumir  realmente  llamadas.  Esto  es  especialmente 
útil,  para  sistemas  muy  caros  como  APIs  de  Inteligencia  Artificial  como  Servicio  (AlaaS). 


In  fact,  an  infinite  loop  in  our 
own  JS  code  was  sendins  so 
many  AJAX  recjuests  that  we 
almost  PPoS  ourselves! 


Haba! 


Com  mitStrip.com 


Simple!  You  just  have  to 
launch  as  man¿  instances  as 
you  need  to  hold  the  load!  ^ 


Q 


What?  What  has  this 
to  do  with  the  cloud? 


Imagen  de  CommitStrip.com 


Errores  más  comunes  (por  código) 


Referimos  a  continuación  una  lista  de  los  errores  más  comunes,  y  de  algunas  soluciones 
cuando  no  encontramos  mucha  documentación  disponible  sobre  una  API  en  concreto. 


Respuesta  200 

OK.  Este  es  el  código  esperado. . .  y  todo  marcha  bien. 
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Respuesta  204 

Sin  contenido.  No  hemos  enviado  los  datos,  pero  la  petición  ha  resultado  exitosa, 
seguramente  con  datos  por  defecto. 

Respuesta  401 

No  autorizado.  Hemos  olvidado  utilizar  el  token.  O  nuestro  token  no  está  correctamente 
configurado. 

Respuesta  403 

Prohibido.  No  tenemos  el  token/acceso  correcto.  Puede  ser  que  intentemos  modificar 
elementos  que  no  sean  de  nuestra  competencia,  como  la  configuración  de  otros  usua¬ 
rios,  etc... 

Respuesta  404 

No  encontrado.  Hemos  apuntado  a  una  ruta  que  no  existe.  Revisa  la  documentación. 

Respuesta  409 

Conflicto,  ya  existe.  Hemos  intentado  crear  dos  veces  el  mismo  elemento,  esto  suele 
pasar  si  realizamos  una  doble  llamada  Ajax,  por  error.  Típico  de  peticiones  POST. 

JSON 

Antes  de  realizar  nuestra  primera  llamada  Ajax,  veamos  como  trabajar  con  JSON. 

Para  la  visualización,  validación  y  conversión  dinámica  de  datos  contamos  con  algunas 
herramientas  muy  útiles. 

•  JSON  Lint 

•  JSON  Formatter  &  Validator 

•  Online  JSON  Viewer 

•  JSON  Editor 

O  Es  importante  recordar  que  algunas  respuesta  JSON,  pueden  contener  hasta  varios 
megas  de  información.  Necesitaras  herramientas  de  visualización  adicionales  más 
allá  de  la  consola  de  tu  navegador. 


El  navegador  nos  aporta  dos  formas  básicas  de  interactuar  con  datos  JSON. 

•  JSON.parsef) 

Que  analiza  la  cadena  JSON,  validándola  y  retornando  los  valores  como  un  dato  válido 
de  JavaScript.  Lo  más  habitual  es  un  objeto  o  array. 

1  var  objeto  =  JSON . parse( '{ "test" :  true}'); 

var  lista  =  JSON . parse( ' [true,  "NO",  23]'); 

3  var  booleano  =  JSON . parse( ' false ' ) ; 

4  var  texto  =  JSON . parse( 1 * 3 4 "cadena ; 

•  JSON.stringifyO 

Analiza  los  valores  y  retorna  una  cadena  en  formato  JSON. 


2 

3 

4 

5 

6 

7 

8 

9 

10 

11 
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var  objetoJSON  =  JSON . str ingi fy( { "test" :  true}); 
var  listaJSON  =  JSON . stringi fy( [true,  "NO",  23]); 
var  booleanoJSON  =  JSON . stringi fy( false) ; 
var  textoJSON  =  JSON . stringi fy( "cadena !") ; 


Peticiones 

La  mecánica  de  las  peticiones  es  realmente  sencilla.  Simplemente  necesitamos  saber  a  que 
URL  vamos  a  realizar  la  petición,  que  método  vamos  a  utilizar  (GET,  POST,  PUT  o  DELETE)  y 
con  que  función  (callback)  manejaremos  los  datos  de  vuelta. 

O  Lógicamente  las  peticiones  Ajax  son  asincronas  por  naturaleza.  Si  aún  tienes  dudas, 
sobre  los  callbacks  y  el  manejo  de  la  sincronía,  este  es  un  gran  momento  para 
retroceder  al  capítulo  anterior  y  repasar  esos  conceptos  antes  de  seguir. 


Si  estáis  familiarizados  con  JQuery,  las  peticiones  Ajax  son  algo  muy  trivial,  gracias  a 
jQuery.ajax().  Veamos  el  siguiente  ejemplo: 


$ ■ ajax( { 

dataType :  "json", 
url :  "  <  —  URL - >", 

}) 

. done( function(  data,  textStatus,  jqXHR  )  { 

consolé. log(  "La  solicitud  se  ha  completado  correctamente."  ); 
consolé. log(  data  ); 

}) 

. fai 1 ( function(  jqXHR,  textStatus,  errorThrown  )  { 

consolé. log(  "La  solicitud  a  fallado:  "  +  textStatus); 

}); 
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No  recargamos  pero  somos  asincronos. 


brawser  cíient 


user  fcnterfece 


I  II  I; 


+ 


HTTP  request 


1 

r 

i 

- 

_ 

web  server 

*  t 

side-server  I u q ¡ c  and  data 


serve  r-stde  system 


browser  cíient 


user  inte  rf  a  ce 


\ 


r  t 

user  cvent  LJI  úpente 
_  I  _ 


Aja*  Engine 


t 


y 


HTTP  req  ue  st  U I,  data ,  lo  g¡c 


. 

¡ 

web  server 

> 

1 

4iíle-se(Vúrlayic  anuí  data 

serve  r-side  system 


Figure  17  Ciassic  Web  Figure  13  ion  the  right| 

Application  Architecture  AJAX  Architecture 

Imagen  de  gemsres.com 

Como  puedes  ver,  ya  no  es  necesario  recargar  la  página  como  antes,  ya  que  el  navegador  se 
encarga  de  hacer  la  petición  y  gestionarla  en  un  segundo  plano.  Ahora  veremos  como  se  hace 
con  Vanilla.js,  verás  que  realmente  se  entiende  mejor  el  proceso  y  parece  menos  mágico  que 
con  JQuery. 


Hablemos  de  XMLHttpRequest 

Para  poder  realizar  peticiones  Ajax,  de  manera  nativa,  los  navegadores  implementan  un 
objeto  desde  el  que  podremos  realizar  las  peticiones,  llamado  XMLHttpRequest. 

Tiene  sus  propios  eventos: 


•  loadstart 

•  progress 

•  abort 


1 

2 

3 

4 
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6 
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10 
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13 
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15 
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•  error 

•  load 

•  timeout 

•  loadend 

•  readystatechange 

Y  sus  propios  estados  de  petición: 

•  0  uninidalized 

•  1  loading 

•  2  loaded 

•  3  i Interactive 

•  4  complete 


Mejor  veamos  como  funciona  con  un  ejemplo  real  y  luego  explicamos  como  gestionar  algo 
que  parece  tan  complejo,  pero  que  realmente  es  sencillo. 

Para  este  ejemplo  hemos  decidido  traer  los  datos  de  la  película  Hackers,  que  además  os 
recomiendo  ver. 

Para  ello  utilizaremos  OMBd Api...  una  vez  leída  la  documentación,  sabremos  que  solo  ne¬ 
cesitamos  apuntar  a  esta  url,  http://www.omdbapi.com/?t=Hackers&y=&plot=short&r=json. 


var  url  =  "http : //www . omdbapi . com/?t=Hackers&y=&plot=short&r=json" ; 
var  xmlHttp  =  new  XMLHttpRequest( ) ; 


xmlHttp . onreadystatechange  =  function()  { 

if  (xmlHttp . readyState  ===  4) 
i f ( xm 1 Http . status  ===  200 )  { 

consolé . info( JSON . parse(xmlHttp . responseText) ) ; 
}  else  if  (xmlHttp . status  ===  404)  { 
consolé . error ( "ERROR !  404"); 

consolé . info( JSON . parse(xmlHttp . responseText) ) ; 

} 

}; 

xmlHttp . open( "GET" ,  url,  true); 
xmlHttp . send( ) ; 


Viendo  el  código  es  mucho  más  sencillo... 

Vamos  por  pasos: 

1.  Línea  1:  Primero  definimos  la  URL. 

2.  Linea 2:  Luego  \nstanc\amos XMLHttpRequest,  igual  que  hacíamos  con  Date  en  capítulos 
anteriores. 
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3.  Linea  4:  Cada  vez  que  cambiemos  de  estado  en  nuestra  petición  Ajax,  el  navegador 
ejecutará  xmIHttp.onreadystatechange . 

1.  Linea  6:  Filtramos  por  el  xmIHttp.readyState,  y  esperamos  al  4  (completado)., 
obviando  todo  lo  demás. 

2.  Linea  7:  Una  vez  confirmamos  que  se  terminó  toda  la  gestión  de  Ajax,  pasamos  a 
analizar  los  datos  recibidos.  Filtrando  por  código  de  estado  con  xmIHttp.status,  y 
parseando  o  alertando  al  usuario  del  error  en  función  de  las  circunstancias. 

4.  Linea  14:  Abrimos  la  petición  con  la  url  y  el  método  deseado. 

5.  Linea  15:  Ejecutamos  la  petición. 

CORS 

Un  problema  clásico  a  tener  en  cuenta  es  la  posibilidad  de  que  CORS,  no  esté  habilitado  en 
el  servidor. 

CORS  básicamente,  es  un  parámetro  que  se  envía  desde  las  cabeceras  HTTP  del  servidor  y 
nos  permite  realizar  peticiones  AJAX.  Existen  algunos  sitios  web,  que  a  pesar  de  tener,  una 
API  funcionando  no  han  habilitado  esta  configuración: 


1  "Access -Control -Allow-Origin",  "*" 

2  "Access-Control -Al low-Headers" ,  "Origin,  X-Requested-With ,  Content-Type,  Accept" 

Y  por  ello,  cualquier  petición  que  hagamos  desde  el  navegador  cliente  no  podrá  realizarse. 

La  mejor  solución,  es  comunicarnos  con  los  responsables  de  la  API  y  facilitarles  este  link, 
donde  Monsur  Hossain  y  Michael  Hausenblas,  explican  como  realizar  las  configuraciones 
adecuadas  en  muchos  entornos. 

Si  por  desgracia  esta  opción  está  descartada,  no  pasa  nada....  existen  más  posibilidades. 

La  primera  y  más  útil  es  crear/configurar/usar  un  proxy.  La  idea  del  proxy,  es  que  realice  una 
petición  capturando  esos  datos  y  enviándolos  de  nuevo,  teniendo  CORS  habilitado  en  la 
cabecera,  de  tal  forma  que  podremos  hacer  peticiones  Ajax,  aunque  tengamos  que  pasar 
por  nuestro  servidor. 

Lógicamente  nos  plantea  un  problema  de  tráfico,  en  nuestro  servidor  y  una  lentitud  en 
nuestras  peticiones,  pero  al  menos  podremos  hacer  las  peticiones. 

O  Antes  de  configurar  un  proxy,  puedes  usa rCrossorigin  para  prototipar-es  un  proyecto 
Open  Source-  y  podrás  adaptarlo  fácilmente  a  tus  necesidades. 


Parte  IV  -  Un  pasito  más... 


Anexo:  ¡Queda  mucho  más  por 
aprender! 

Recursos 


A  lo  largo  del  libro  hemos  incluido  gran  cantidad  de  links  para  facilitarte  recursos  para 
aprender  más  acerca  de  conceptos  claves. 

Hemos  recopilado  todos  los  enlaces  de  manera  automática  en  esta  lista  de  enlaces  para 
vosotros  en  un  solo  lugar,  extras/recursos.md  en  nuestro  repositorio. 


Libros  interesantes 


Deberías  leer... 


•  JavaScript  for  PHP  Developers:  A  Concise  Guide  to  Mastering  JavaScript  by 
Stoyan  Stefanov 

•  You  Don’t  Know  JS  (book  series)  by  Kyle  Simpson 

•  JavaScript  Allongé,  the  “Six”  Edition  by  Reg  “raganwald”  Braithwaite 

•  Effective  JavaScript:  68  Specific  Ways  to  Harness  the  Power  of  JavaScript  by 
David  Hermán 

•  JavaScript  for  Kids:  A  Playful  Introduction  to  Programming  by  Nick  Morgan 

•  Eloquent  JavaScript  de  Marijn  Haverbeke 

•  JavaScript:  The  Good  Parts  de  Douglas  Crockford 

•  JavaScript  Patterns  by  Stoyan  Stefanov 

•  JavaScript  Ninj'a  de  John  Resig  y  Bear  Bibeault 

•  JavaScript.  La  Guía  Definitiva  de  David  Flanagan 

•  Código  Limpio  de  Robert  C.  Martin 

•  Sams  Teach  Yourself  Node.js  in  24  Hours  by  George  Ornbo 

•  Learning  JavaScript  Design  Pattern  byAddy  Osmani 


Ampliar  horizontes 


Esperamos  que  este  libro  os  haya  resultado  de  utilidad  y  que  os  haya  ayudado  a  empezar  a 
recorrer  el  largo  camino  del  desarrollador  web. 

Os  proponemos  algunas  ideas  para  que  podáis  seguir  creciendo  y  evolucionando,  a  pesar 
de  que  nuestra  historia  acaba  aquí. 
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Está  claro  que  la  mejor  manera  de  aprender  un  lenguaje  de  programación  es  practicando, 
practicando  y  seguir  practicando. . . 

Éstas  son  algunas  formas  sencillas  pero  efectivas  de  lograrlo: 

Aprender  a  utilizar  Git  y  GitHub 

Si  queréis  formar  parte  de  la  comunidad  o  entrar  a  trabajar  en  un  entorno  ágil,  uno  de  los 
primeros  pasos  es  aprender  a  manejaros  con  el  control  de  versiones. 


Aprender  un  nuevo  lenguaje 

Puede  parecer  una  locura  empezar  con  otro  lenguaje,  pero  cada  lenguaje  tiene  algo  único 
y  un  enfoque  especial.  Aprender  más  lenguajes  os  ayudará  a  pensar  mucho  más  allá  del 
lenguaje  que  uses.  Lo  que  a  la  larga  hará  que  seáis  un  mejores  artesanos. 

Dominar  un  framework 

Es  una  decisión  complicada...  un  framework  es  un  recurso,  que  puede  ser  difícil  de  aprender 
y  en  ocasiones  tiene  una  vida  útil  muy  corta.  Gran  parte  del  trabajo  será  elegir  el  framework 
que  más  os  convenga.  Es  muy  importante,  tener  en  cuenta,  que  si  es  el  primer  framework... 
os  enseñará  una  nueva  forma  de  ver  las  cosas  y  de  trabajar  en  JavaScript.  No  lo  desaprove¬ 
chéis,  merece  la  pena  emplear  un  poco  más  de  tiempo  en  aprender  nuevas  formas  de  hacer 
las  cosas. 


Familiarízate  con  las  librerías  más  populares 

JQuery  puede  ser  un  gran  comienzo.  Podéis  adaptar  librerías  a  JQuery  o  al  revés,  así 
rápidamente  ganaréis  soltura.  Existen  muchas  otras  librerías  que  deberíais  conocer  y  que 
te  harán  la  vida  más  fácil. 


Contribuye  a  mejorar  las  cosas 

Puedes  unirte  a  grupos  de  trabajo  y  organizaciones  en  Github  e  ir  colaborando  en  alguno  de 
los  muchos  proyectos  que  existen  sobre  JavaScript. 

Documentar  no  es  una  mala  idea 

Durante  la  lectura  de  este  libro,  espero  que  hayáis  podido  consultar  la  documentación  de 
MDN  para  poder  aprender  más  sobre  lo  que  os  contábamos. . ..  Recuerdar  que  esa  documen¬ 
tación  la  crean  muchos  voluntarios,  en  todo  el  mundo,  que  entre  otras  cosas,  la  mejoran, 
amplían  y  traducen  a  diversos  idiomas.  No  lo  dudéis...  ¡uniros! 
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Ayuda  al  prójimo 

Seguro  que  has  mirado  -más  de  una  vez-  como  se  hace  algo  en  Stackoverflow,  Codepen,  foros 
especializados,  comunidades,  etc...  Podéis  también  contribuir  y  ayudar  a  los  demás,  solu¬ 
cionando  dudas.  Al  principio  se  hace  muy  cuesta  arriba,  pero  luego  es  extraordinariamente 
atractivo.  Y  si  no  que  le  pregunten  a  Coma. 

Guías  de  estilo 

Adoptar  una  guía  de  estilos  ayudará  no  solo  a  consolidar  una  forma  correcta  y  uniforme  de 
desarrollar  código  en  JavaScript  si  no  que  también  os  ayudará  a  gestionaros  con  La  Ley  de 
Parkinson  de  la  Trivialidad. 

Recomendamos  usar  Idiomatic.js  aunque  existen  muchas  más  como  JavaScript  Style  Guide 
de  Airbnb  y  muchas  más. 
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¡Forma  parte! 

Meetups 

Una  de  las  maneras  más  efectivas  de  entrar  en  contacto  con  la  comunidad  y  formar  parte  de 
un  grupo  de  personas  con  el  mismo  interés,  es  Meetup. 

Existen  muchos  grupos  dedicados  al  desarrollo.  Estos  son  solo  algunos  de  los  más  activos. 

•  Deberías  conocer... 

•  Open  Source  Weekends 

•  MadrídJS 

•  Nodejs 

•  Word  Press  Madrid 

•  Hackathon  Todos  Incluidos 

•  Girls  ¡n  Tech  Spain 

•  Hackathon  Lovers 

•  HTML5  Spain 

•  APIAddicts 

•  ReactMad 

•  Edupreneurs  Madrid 

•  loT  Madrid 

•  Angular  Madrid 

•  GDG  Madrid 

•  APPAMonth 

•  Docker  Madrid 

•  Madrid  Python 

•  Front-End  Developers  Madrid 

•  Software  Craftsmanship  Madrid 

•  Tetuan  \ /al ley 

•  JS  Dojo  Madrid 

•  Polymer  Madrid 

•  ReactJS  Spain 

•  AdaLab 

•  FrontGirls 


Otras  formas 


También  hay  una  gran  oferta  de  eventos  fuera  de  Meetup,  como  son: 
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Deberías  conocer... 


•  Compus  Madrid  Events 

•  Betabeers 

•  MediaLab  Prado 


Desarrolladores  que  deberías  seguir. 

Esta  lista  se  regenera  de  manera  automática  -cada  vez-  que  se  actualiza  el  libro.  Recoge  la 
información  pública  directamente  de  Twitter  y  la  organiza  por  orden  alfabético,  tomando 
como  referencia  el  @user!d. 


La  lista  no  pretende  ser  exhaustiva  ni  completa  en  absoluto,  por  supuesto,  no  está 
todo  el  mundo  y  es  meramente  indicativa. 


•  Ariya  Hidayat 

@AriyaHidayat:  Software  Provocateur.  Author  of  PhantomJS  and  Esprima.  Running  en- 
gineering  at  @ShapeSecurity. 

•  BrendanEich 

@BrendanEich:  Prendan  Eich  invented  JavaScript,  co-founded  http://mozilla.org ,  and 
has  founded  a  newstartup,  https://brave.com/ . 

•  Simeón. _ proto _ 

@DotProto:  Oh,  helio  there.  I’m  Simeón,  a  Front  End  Engineer  at  @Blizzard_ent.  JSIover, 
NIH  fighter,  and  smitten  with  the  open  web.  Opinions  are  my  own. 

•  John  Papa 

@John_Papa:  Husband,  father,  and  Catholic  enjoying  every  minute  with  my  family. 
Disney  fanatic,  evangelist,  HTML/CSS/JavaScript  dev,  speaker,  and  Pluralsight  author. 

•  Matías  Arrióla 

@MatiasArriola:  Whenyou  see  me  again,  it  won’tbe  me. 

•  Pascal  Precht  ¡S-ISIS»IS 

@PascalPrecht:  / like  headphones,  art,  skateboarding  and coding.  Angular GDE at@Goo- 
gle,  @thoughtram  co-founder  and  creator  of  @5thingsAngular 

•  Sacha  Greif 

@SachaGreif:  Originallyfrom  París,  but  now  living  in  Osaka.  I  co-wrote  @DiscoverMeteor, 
and  created  @Telescpe  and  @Sidebar!0.  Addicted  to  ffHearthstone  and  #BJJ. 

•  SimoAhava 

@SimoAhava:  Sénior  Data  Advócate  at  @ReaktorNow  \  Google  Analytics  \  Google  Tag 
Manager  \  Passionate  blogger  \  Experienced  speaker  \  Google  Developer  Expert 
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•  Addy  Osmani 

@addyosman¡:  Engineer  at  Google  working  on  @GoogleChrome  •  Author  •  Creator  of 
TodoMVC,  @Yeoman,  Material  Design  Lite,  Critical  •  Husband 

•  Amjad  Masad 

@amasad:  Founder  @repl¡t.  Previously  JavaScript  @facebook  (@babeljs,  @reactnative) 

•  xnoEMKIIlü  ulflilflq 

@br¡anleroux:  *start¡ng  something  new  @beg¡n  * 

•  Chris  Heilmann 

@codepo8:  Londoner,  Germán,  European.  Developer  Evangelist  -  all  things  open  web, 
writing  and  helping.  Works  at  Microsoft  on  Edge,  opinions  totally  my  own.  ffnofilter 

•  cody  lindley 

@codyl¡ndley:  Sénior  Ul  Engineer  at  Citrix  4  @Grosshopper.  In  all  I  do  lover  of  Christ, 
people,  logic  &  dying  art  of  debate,  conversation,  &  reason.  Husband,  father  to  3  boys 

•  Carlos  Hernández 

@cod¡ngcarlos:  Me  levanto  y  programo.  Bueno,  programo  sentado.  Gamifico  cosas,  a 
veces  prestidigito  y  hago  música  rara.  Papi  de  @gamify_es 

•  David  Walsh 

@dav¡dwalshblog:  Mozilla  Sr.  Web  Developer,  Front-End  Engineer,  MooTools  Core  Deve¬ 
loper,  JavaScript  Fanatic,  CSS  Tinkerer,  Node  Hacker,  web,  VR,  and  open  source  lover. 

•  Dejan  Dimic 

@dejan_d¡m¡c:  Minds  are  like  parachutes  -  they  only  function  when  open.  -  Thomas 
Dewar 

•  Dan  Shaw 

@dshaw:  CTO  and  Co-Founder  of  @NodeSource  -  secure,  reliable,  extensible  Node.js. 
Always  betón  #nodejs! 

•  DucNguyen 

@ducntq:  Khovicóng  nghe 

•  Elijah  Manor 

@el¡jahmanor:  {priorities:[‘Christian’,’Family’,’Work’],  work:[‘@LeanKit’,  ‘@PluralSight’,  ‘@egg- 
headio’],  tech:[‘#JavaScript’,  ‘#ReactJS’,’#jQuery’],  titles:[‘(a)M\/PAward’]} 

•  ErikAybar 

@er¡kthedev_:  Husband/Father  •  Remóte  Worker  •  Software  Engineer  @ProcticeGenius  • 
@eggheadio  •  JavaScript,  #reoctjs,  occasional  ranting... 

•  Firede 

@f¡rede: ... 

•  Mi  los  Gavrilovic 

@gavr¡s¡mo:  Freelance  web  developer  or something  like  that... 

•  Richard  Gibson 

@g¡bson042:  Software  engineer  extraordinaire  (@Dyn  Architect,  @jquery  Core/Sizzle/- 
QUnit),  polymath,  übergeek,  and  passionate  agorist. 

•  Aleksandr  Filatov 

@greybax:  #frontend  web  developer 
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•  Idan  Gazit 

@¡dangaz¡t:  Designer/Developer  hybrid.  @djangoproject  core  alum.  Datavisjunkie.  Ma- 
ker  ofthings  delightful.  I  like  to  ogle  detai Is.  Extraed ng  meaning  from  data  @Heroku. 

•  james  young 

@jamsyoung:  Applications  Architect  at  Turner  Broadcasdng  and  developer  on  a  variety 
ofopen  source  projeets 

•  John -David  Dalton 

@]da[ton:JavaScriptdnkerer,  bug  fixer,  &  benchmark runner- CreatorofLodash  •  Former 
Chakra  PerfPM  •  Current  WebApps  &  Frameworks  PM  @Microsoft. 

•  John  Resig 

@jeres¡g:  Creator  of@jquery,  JavaScript programmer,  author,  Japanese  woodblock  nerd 
(http://ukiyo-e.org ),  work  at@khanacademy. 

•  jfroffice 

@jfroff¡ce:  Web  Design,  HTML5,  ES6,  SASS,  CSS3,  NodeJS,  Angular,  React,  D3,  JQuery, 

Docker,  MongoDB,  Nginx,  Apache,  Varnlsh 

•  Kahlil  Lechelt 

@kahliltweets:  JavaScript person.  Co-hostof(S>reactivepod.  Deejay.  kahlilsnapson Snap- 
chat&  kahlillechelt  on  IG.  Frontend  Architect  at  l&l.  Opinions  are  mine. 

•  Kent  C.  Dodds 

@kentcdodds:  Making  software  de v  more  accessible  ■  Mormon,  Flusband,  Father,  Tea- 
cher  ■  OSS,  GDE,  @TC39  ■  @PayPalEng  @egghead¡o  @FrontendMasters  @JavaScriptAir 
@React30  ■  #JS 

•  Ulises  Gascón 

@kom_256:  ttMaker,  #ComputerGeek,  #WebDeveloper,  #loT  \  #Js,  #Node,  ttPython  \  Co¬ 
organizador  de  @os_weekends  \  Profe  en  @fict¡ziaescuela  \  xlBMer 

•  Hao-Wei  Jeng 

@[0ckys:  lockys  on  the  internet,  loving  in  #WebDevelop  ffFrontEnd  ffJavaScript  ffNodeJS 
#brainwarer 

•  Tracy  Lee  \  ladyleet 

@[adyleet:  Speaker\#GoogleDevExpert\Cofounder  @thisdotmedia\Sold  laststartup\@ModernWeb_- 
@ngcruise  @rxworkshop  @venturehacked  @embermeetup  #foodie  http://ladyleet.com 

•  Leonardo  A.  Souza 

@leobetosouza:  Chato.  Carioca  suburbano  morando  em  Niterói.  Cristao.  Flamenguista. 

Web  Developer.  Chato. 

•  Marco  Trulla 

@marcotrulla:  #Freelance  AWebDev  # Graphics  ffNodeJS  # Photo  ffWebDeveloperltaliani 
(http://bit.ly/ljz9IG7)  -  ffWebDesignerltaliani  (http://bit.ly/lo4yNe7) 

•  marocchino 

@marocch¡no:  ruby,  javascript,  vim,  elixir,  elm 

•  Mathias  Bynens 

@math¡as:  Web  standards  fanade.  JavaScript,  HTML,  CSS,  HTTP,  performance,  security, 

Bash,  Unicode,  macOS. 
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•  Mihai  Paun 

@m¡ha¡paun:  Web  craftsmon.  Art  aficionado.  Music  head.  Husband  of  @Be_lnSight  / 
http://in-sight.ie/ 

•  NatalieMac 

@natal¡emac:  l’m  a  web  developer,  Ul  designer,  and  founder  of  the  amazing  Creative 
agency  Purple  Pen  Productions. 

•  Nick  Salloum 

@n¡cksalloum_:  full  stack  software  engineer  //  building  stuff  at  @AxiomZenTeam  // 
adaptive  like  a  chameleon  //  loves  surfing // stoked  on  Ufe 

•  Ryuichi  Okumura 

@okuryu:  Technical  @  Yahoo!  JAPAN,  made  in  Kyoto. 

•  Open  Source  Weekends 

@os_weekends:  #Meetup  para  amantes  del  #OpenSource.  Nos  reunimos  una  mañana  de 
sábado  al  mes  \  Organizan  @Josetekh,  @kom_256,  @ignaciodenuevo y  @CodingCarlos 

•  Paullrish 

@pauljr¡sh:  The  web  is  awesome,  let’s  make  iteven  better»  I  workon  Chrome  DevTools 
and  browser  performance  •  big  fan  ofrye  whiskey,  data  and  whimsy 

•  Axel  Rauschmayer 

@rauschma:  JavaScript: blogger@2ality,  trainer @Ecmanauten,  books  http://exploringjs.com, 
newsletter  @ESnextNews. 

•  rem 

@rem:  Alt  about  CSS  sizing  units.  Sometimes  about  code  too. 

•  Brian  Rinaldi 

@remotesynth:  /  share  links  on  web,  mobile  development  &  tech.  Work  @  Progress 
(Telerik).  Co-edit  Mobile  Web  Weekly  http://mobilewebweekly.co/ .  Opinions  no  longer 
expressed  here 

•  Rebecca  Murphey 

@rmurphey:  Software  engineer  @lndeedEng.  Tweets  are  myown,  obvi. 

•  Kristian  Roebuck 

@roebuk:  Web  Developer,  Runner 

•  rick  waldron 

@rwaldron:  Open  Web  Engineer  atBocoup.  Ecma/TC39.  http://github.com/rwaldron  Crea- 
tor  of  Johnny-Five:  http://johnny-five.io  Black  Uves  Matter 

•  stephan  lindauer 

@stephan[\ndauer.#devopsat@civey_de//computersc¡encemasterstudentat@HTW_- 
Berlin //opinions  are  someone  else’s//hier  koennte  ihre  werbung  stehen 

•  Profunctor  Optics 

@tomdale:  JavaScript  thinkfluencer 

•  Eürevor  Morris 

@trevnorr¡s:  node.js  core  maintainer  and  destróyer  ofslow  code  @NodeSource 

•  Umar  Hansa 

@umaar:  Web  developer. 
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•  WeCodeSign  Podcast 

@wecodes¡gn:  El  #podcastde  diseño,  desarrollo  front-end y  ux  quincenal  por  @lgnacio- 
deNuevo  -  Feed:  http://feeds.feedburner.com/WecodesignPodcast . . . 

•  Yotam  Ofek 

@yota  mofek:  http://snd.se/yUPbtT 


